The oft touted benefits of dark mode are iffy. And usage stats are tough to pin down, but some sources show as much as 60% of users on desktop and up to 80% of users on mobile prefer using dark mode. Dark mode has become a standard for websites to include as part of their design.
Adjusting your website design for dark mode can be a lot of work as it entails an alternate color scheme for every element of your design. This potentially means a lot of added CSS for each element, and HTML for swapping out content like images. Here are two core techniques to help make the process easier, including for future updates made to design elements.
Global color scheme
Start by developing a color palette for the regular version of your site to use consistently across your elements. If the colors for your layout components are used to define depth, like navigation that stands out over content, include those definitions as part of your palette.
Once you have your palette, in your CSS, set your colors as global variables:
:root {
--content-tone-1: #444;
--content-tone-2: #ddd;
--content-tone-3: #111;
--background-tone-1: #f1f1f1;
--background-tone-2: rgba(255,255,255, .5);
--background-tone-3: #fff;
}
And use the variables you set throughout your elements:
h3 {
color: var(--content-tone-1);
}
By doing this, you will be able to use the global CSS colors to apply dark mode versions for them:
:root {
@media (prefers-color-scheme: dark) {
--content-tone-1: #aaa;
--content-tone-2: #666;
--content-tone-3: #ddd;
--background-tone-1: #222;
--background-tone-2: rgba(0,0,0, .2);
--background-tone-3: #111;
}
}
This applies your colors to all the elements that use your variables!
Content swapping
When converting your design to dark mode, you’re basically putting content on black, instead of on white. This means that while your text will likely be white, not all of your content or components need to change. Most accent colors can work on both light and dark, especially for elements like titles and buttons.
This applies for images as well. For the most part, you should be able to keep the same images as light mode, especially for photos. You can also use transparent PNG’s and SVG’s for illustrations.
For certain images that may need dark mode adjustments, you can swap them out using the picture HTML tag:
<picture>
<source srcset="logo.png" media="(prefers-color-scheme: light)">
<source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
<img src="logo.png" alt="Logo">
</picture>
Regardless of the size of your website, having these two techniques in place will greatly minimize the need for extra CSS and HTML for your dark mode adjustments.
For an example of the techniques above, check out the Starter web pages components template.
