Does the dark theme on a webpage really save smartphone power?

Important: Not all browsers have support for writing the invert() property. For best support, specify 100% as a parameter.

body.dark-theme {
filter: invert(100) hue-rotate(180deg); /* hue-rotate will return color tones */
}

Also when using the filter property, note that only explicitly set colors are inverted. If an element has no explicit background color, the background will remain the same.

How do you get around this problem?

Easy. You can specify the default background-color:

body.dark-theme {
background-color: #fefefe;
filter: invert(100) hue-rotate(180deg);
}

To avoid this problem in children, you can specify an inherit value for all elements, i.e. the end result will be as follows:

body.dark-theme {
background-color: #fefefe;
filter: invert(100) hue-rotate(180deg);
}
body.dark-theme * {
background-color: inherit;
}

Using an asterisk (*) implies a universal selector that has low specificity, so it will only work for items that have no background color specified.

What do we do with the images?

After applying the filter property, the images on the site will appear negative, so it's worth inverting them back using the same rule:

body.dark-theme img:not([src*=".svg"]), body.dark-theme video, body.dark-theme div[style*="url"] {
filter: invert(100) hue-rotate(180deg);
}

The div[style*="url"] selector can be used as a universal selector for div blocks with a given image as the background, or you can augment this CSS rule with custom selectors.

SVG images are excluded from the rule of inverting, because they are often used for icons and various markers, and are usually perfectly inverted.

The final version contains a minimal set of rules and generally does everything you need to implement a dark theme on the site:

body.dark-theme {
background-color: #fefefe;
filter: invert(100) hue-rotate(180deg);
}
body.dark-theme * {
background-color: inherit;
}
body.dark-theme img:not([src*=".svg"]), body.dark-theme video, body.dark-theme div[style*="url"] {
filter: invert(100) hue-rotate(180deg);
}

The pros of this approach:

• You can quickly adapt the site to a dark smartphone theme
• The fewer CSS rules and include files - the less the weight of the page

Cons:

• They lose their corporate colors, the site becomes black and white except for pictures.
• In some cases, the pictures fade a little after being double-colored (which is not really always noticeable to the eye):

2. "Expensive and long. Individual approach

A simple but rather time-consuming method that involves redefining all the necessary CSS rules.

The implementation plan is as follows:

Here we also add a class to the html or body tag using js, or work with the new dark-theme.css style sheet. Read more here.

Then we redefine each rule that affects the coloring of blocks. We use the selector for this, including our new .dark-mode class.

Example:

body {
color: #221;
background: #fff;
}
a {
color: #00333c;
}
/* Styles for dark mode */
body.dark-theme {
color: #eaeaea;
background: #3c0000;
}
body.dark-theme a {
color: #ff7979;
}

CSS Variables

The most convenient way to redefine styles using CSS variables, it will be fast enough if you already use them in your style sheet, otherwise - is worth to bring all the colors used in the rules in advance in special variables. Example for a standard theme:

body {
--text-color: #222;
--bkg-color: #fff;
--link-color: #0033cc;
}

For a dark theme:

body.dark-theme {
--text-color: #eaeaea;
--bkg-color: #3c0000;
--link-color: #ff7979;
}

And, accordingly, the rules using CSS variables will look like this:

body {
color: var(--text-color);
background: var(--bkg-color);
}
a {
color: var(--link-color);
}

What's worth paying attention to:

• you should consider all the semantic elements on the page.
• box-shadow property - you can't control the color, you have to change all the properties, or leave the shadows light.
• SVGs embedded in html code - use the fill property instead of background and stroke property instead of color, or vice versa.

The advantage of this approach is that you can achieve a perfect color match because the colors are set manually rather than inverted.

Among the disadvantages it is worth noting the excessive labor intensity, especially in a large site, rather than a one-page, but the result will justify the labor costs.

The "right" method depends on the requirements of your project. For example, if you are creating a large project from scratch, you can use CSS variables and set them in advance, which will help you cope with a large code base later. On the other hand, if your project has long been created and you just need to quickly "roll up" a dark theme on the site, you should take a closer look at the first method using CSS-filter, and clean up all the "cracks" manually with a small number of styles.

Also, if your project has to support legacy browsers, you should avoid using CSS variables and maybe even a CSS filter. In that case, you can simply use a way to override styles forcibly.

Moreover, our article is not saying that we can use only one method. Sometimes a combination of methods proves to be the most effective way.

Introducing a dark theme to the site

To switch between the standard light and dark theme, we need a special switch-button:

<button class="toggle-theme">Dark Theme</button>

It can be in the header of the site, as well as in any other place convenient for interaction.

Changing the <body> tag class

The general idea of this implementation is to create a full set of color styles without affecting our "default" theme, using a special dark-theme class that will be set to the <body> tag when you click on a special button.

A script for switching classes:

// Button selector .toggle-theme
const btn = document.querySelector('.toggle-theme');
// Event >click button
btn.addEventListener('click', function() {
// When switching change the class (delete or add) depending on current state
document.body.classList.toggle('dark-theme');
// Create a cookie to then check it on the server
var theme_cookie = document.body.classList.contains("dark-theme") ? "dark" : "light";
document.cookie = "theme=" + theme_cookie ;
})

To keep our theme enabled after a page reload, we can use the "theme" cookie variable, which we set in the js and then check on the server side:

<?php
$theme_classes = '';
if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {
$theme_сlаsss = 'dark-theme';
}
?>
<!DOCTYPE html>
<html lang="ru">
<body class="<?php echo $theme_сlаsss; ?>">
</body>
</html>

After that, you can override the styles for dark mode using the CSS filter or style override we discussed above.

Using different style sheets

Instead of storing all the styles together in one style sheet, we can also switch between the style sheets for each theme. This method assumes that you have complete stylesheets ready to go. For example, a default light theme such as light-theme.css and a dark-theme such as dark-theme.css.

By default, we include only one style sheet for the standard light theme:

<!DOCTYPE html>
<html lang="ru">
<head>
< ! -- Light theme CSS -- >
<link rel="stylesheet" href="/css/light-theme.css" id="theme-toggle">
</head>
</html>

Here we use the #theme-toggle identifier so that we can refer to it with JavaScript to switch between light and dark modes. Only this time we switch files instead of classes:

// Button selector .toggle-theme
const btn = document.querySelector(".toggle-theme");
// Style sheet selector <link>
const theme = document.querySelector("#theme-toggle");
// Click the button
btn.addEventListener("click", function() {
// If the current url contains "light-theme.css"
if (theme.getAttribute("href") == "light-theme.css") {
// then switch it to "dark-theme.css"
theme.href = "dark-theme.css";
var theme_cookie = "dark";
// Otherwise
} else {
// switch it to "light-theme.css"
theme.href = "light-theme.css";
var theme_cookie = "light";
}
// Create a cookie to then validate it on the server
document.cookie = "theme=" + theme_cookie ;
})

Just as with the class switch, we check the cookie variable on the server side:

<?php
$theme_StyleSheet = 'light-theme.css';
if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {
$theme_StyleSheet = 'dark-theme.css';
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<link href="/css/<?php echo $theme_StyleSheet; ?>" rel="stylesheet" id="theme-toggle">
</head>

Information about supporting a dark theme on your website for the browser

To inform the browser's User-Agent of system color scheme preferences and indicate which color schemes are supported on the page, we can use the color-scheme meta tag.

<meta name="color-scheme" content="dark light">

For example, suppose the page were to support both "dark" and "light" themes. We can put them both as values in the meta tag, separated by spaces. If we want to support only the "light" theme, then we need to use only "light" as the value.

What is it for?

When this meta tag is added, the browser takes the user's color scheme preferences into account when rendering User-Agent controlled page elements (such as <buttons> and <input>). It displays colors according to the set theme for the main background, form controls, and other UA-controlled styles.

At the moment, the property lacks broad browser support, although Samsung Internet and Chrome for Android support it.

prefers-color-scheme

The prefers-color-scheme CSS media query lets you determine on the browser side whether the user prefers a light or dark color theme, depending on the settings in the operating system. The CSS syntax is as follows: for example, if the user prefers a dark theme, then all CSS rules intended for it should be specified as part of this media query:

@media (prefers-color-scheme: dark) {
body {
background: black;
}
}

And, for the light theme, accordingly:

@media (prefers-color-scheme: light) {
body {
background: white;
}
}

The user's preferred color scheme can also be checked with javascript, but the browser must support matchMedia.

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
if(prefersDark){
/*we can add a class for the body here, or include a different style sheet for the dark theme*/
console.log("User prefers dark theme");
}

As a result, we can connect a dark theme for our site not only by clicking on the switch button, but also automatically activate it when the page first loads, using the information about the current user theme in the system settings.

Conclusion

Working with and maintaining a dark theme is quite an interesting job that requires creativity and opens up new possibilities in website design. For some visitors, the ability to use a dark theme is an important factor, so it's probably worth thinking about implementing it in your project. Implementation is not without pitfalls and requires careful testing, but dark mode is definitely a great way to show the user that you really care about them.