How to Setup a Dark Mode Theme for Your Website

Chrome 76 has added support for CSS prefers-color palette multimedia query, which allows websites to ask your operating system for the color palette you prefer so they can theme themselves appropriate. Here’s how to set it up for your website.

Which browsers support dark themes?

At the time of writing, most major browsers support dark mode, although some browsers have not yet been updated to support it. You can check the current status on caniuse.com, which generates a support table for different browsers:

As usual, IE 11 does not receive any updates and the 2% of the Internet still blocked on it will not be able to use it. But, these people are probably not on Windows 10, so they wouldn’t see any use anyway without a dark theme to toggle.

Fortunately, using the preferred color scheme will not break your CSS, as it is an optional parameter.

How to use CSS color set support

To actually use the preferred color scheme in your CSS, you must use it as an optional media request, in the same way as for a responsive design. For example, if your default is a white background with black text, you can use the media query to switch to black background and white text.

body {
background color: #fff;
color: # 000;
}

@media (prefer color scheme: dark) {
background color: # 000;
color: #fff;
}

You can combine this with any other technique you use. For example, you can only allow dark mode on mobile devices if you combine it with a responsive media request for screen size.

Configure a dark theme with CSS variables

CSS variables are a fairly recent addition with widespread support. They are perhaps the easiest way to create a dark theme alongside the preferred color scheme. Instead of setting color values ​​manually, like this:

body {
background color: #fff;
}

p {
color: # 000;
}

Instead, create a block: root which will apply everywhere. You can define variables here using the double hyphen (-) followed by the name of the variable. Then, whenever you need to define a value, use the variable name in the var () function instead:

: root {
– primary: # 000;
–background: #fff;
}

body {
background color: var (- background);
}

p {
color: var (- primary);
}

This method has the wonderful advantage of being able to change these variables and reflect the changes everywhere. Just below the block: root, lets add another one inside the media request prefers-color-scheme:

: root {
– primary: # 000;
–background: #fff;
}

@media (prefer color scheme: dark) {
: root {
– primary: #ddd;
– background: # 222
}
}

body {
background color: var (- background);
}

p {
color: var (- primary);
}

This resets the variables to dark values ​​if the browser detects that the user prefers a dark scheme. You can manage these two color palettes and easily adjust them by simply changing the variables.

Additionally, if you need additional CSS for the dark theme, you can put it in another preferred color scheme query, although you probably want to place it under the rest of the CSS so that it takes precedence, or use it! important flag.

Replacement for IE 11

IE 11 does not support this (obviously). If you want to provide support for IE 11, you can use the old method of doubling your properties:

p {
color: # 000;
color: var (- primary);
}

This way, IE 11 will only treat the first and treat the other as invalid CSS. Dark themes will not work, but they would not work anyway because there is no media request support.

Also, if you don’t want to use CSS variables at all, you can just completely crop your site in the preferred color scheme query, but this is clunky and wasteful of space. If you need to support all existing browsers, use the dual fallback property instead.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.