Do you have a project that may need a dark mode? Then consider spending 5 minutes reading Do I have to add a dark mode now? first. That was the start of this post initially, but there was more to it than I thought.

Dark mode design con­sider­ations

Warning! There’s some interactive content, so some of it may not make sense without enabled. Please open this page in a normal browser (with enabled) to read the post as intended.

Converting styles to a dark mode

I thought I was smart by considering a dark mode with medium/dark-colored backgrounds with black text on it:

I had to try it.

Dark blue doesn’t have enough contrast, green isn’t exactly dark and neither is yellow. That leaves the color range around red for the background. The reds and magentas I tested met triple A contrast accessibility requirements! Another cool thing is that they say that red light doesn’t affect your night vision. (sidenote: Emphasis on say, because it’s not entirely true. ) Unfortunately, red is also the color in most common types of color blindness. About 5% of the world’s population would see black on red as low-contrast grey scale.

So apart from aesthetics, light-on-dark is much more common for a good reason. There are lots of how-tos for designing dark UIs on the web, but here are a few short tips:

• A dark theme doesn’t have to be pure white text on a pure black background. In fact, that high contrast can be awful to look at.
• You don’t have to replace all colors of the light theme with dark theme variants. Vibrant colors can have enough contrast with both light and dark backgrounds.
• Light text on a dark background can appear more bold than dark on light. You may want to choose lighter font weights for dark mode.
• It’s likely that some people using the design will have Night Shift/f.lux/Redshift enabled. After all, dark themes are more popular when it’s dark. Consider testing the colors after sundown, with incandescent lighting and one of those color temperature tools enabled.

One other thing: a dark mode does not have to be derived from the existing light theme. I think dark and light themes will always evoke different emotions. That means a dark theme just can’t communicate the same as the light theme.

Instead of trying to fix that, it may be better to use that to your advantage for your product’s identity. If you’re taking that identity for a night out, how would it dress up for it? Are you going to a bar, a fancy restaurant or for a walk on the moon-lit beach?

Letting users pick a theme

Users need to be able to manually choose a theme. I found that designing the controls for that was surprisingly challenging.

Automatic theme selection

Websites can use a CSS media query to automatically apply the color scheme in use by the operating system: light or dark. Problem is, no current browser supports that media query yet. Safari has it in a preview version, but I think it will be a while until all major browsers support it. Until then, users have to manually change the theme.

If only the application could select the dark or light mode based on something else… If you return to this page after 21:00, you’ll see it will automatically load with the dark theme. It’s a crude way of guessing if the sun has gone down at your location. And an even cruder way of guessing if you’d prefer the dark mode. But it’s a start!

Positioning and designing the mode switcher

Call it wild speculation, but I’d say that for most users, picking a theme isn’t high on their list of priorities upon seeing a website for the first time. For others, especially those with visual impairments, it’s actually the thing they’d like to do first. For them, the controls should be reachable from the top. (sidenote:

Or at least near the main navigation, where ever it’s positioned. In apps it could also be a mode-specific setting, like the reading mode for ebooks. ) </small> </span> But putting the controls at the top, where on most websites the main navigation and key info are placed, seems to give it way more attention than it deserves for most users.

I don’t know if there’s a universal solution here, but I feel that we designers shouldn’t be like architects sending wheelchair users around the building to some backdoor. That damn ramp should be at the main entrance instead. So on this website, I put the button to the right of the main navigation. In that general area I’ve seen accessibility options like high contrast and text size options on other websites too.

Then there’s the question of what the controls should look like. I considered:

• Radio buttons:
  Light Dark
• Buttons with text labels:
• Buttons with icons:

I only have a light and a dark theme, so I can toggle between the two with a single button. I think for many websites it would be nice to just have an icon there. I don’t think currently there’s a commonly understood icon for it though (I’ve seen a moon ☾, sun ☼ and the contrast icon ◐ so far).

That’s a pity, because as an icon, the button would be much smaller. But if people deciding about budgets know one thing about web design, it’s that the real estate at the top is most expensive. Please let me know if you think you know a good candidate for the universal toggle-between-themes icon!

Content in dark mode

What to do with images and video in dark mode? Especially in retail, white is the de facto standard background in images. That can be a problem in dark mode as it negates several benefits of adding one.

I don’t think that problem is easily solvable if the application uses images provided by users or third parties. But any type of brand-related photo or illustration can be adjusted or replaced with one that fits better to the mood and colors of the dark mode. At the very least you can use a white on dark version of the brand’s logo.

Because you’re viewing this page in dark mode, here’s this dark photo by Nathan Dumlao. Because you’re viewing this page in light mode, here’s this bright photo by Holger Link.

Transitioning website colors between light and dark mode

MacOS nicely transitions between the light and dark mode color schemes in two seconds. I wanted to have that too on my website, so it plays along nicely when the OS setting changes. My initial attempt worked pretty well. Except that all elements that already had transitions assigned to them (for things like mouse hover), stuck to that transition duration.

See the issue for yourself by changing the theme in the example below:

So, the link color changes much quicker than the rest. Not exactly great. I tried two solutions that I then discarded, but I have to warn you: CSS nerdery in the next paragraph!

Both solutions require adding a CSS class to the page for the duration of the transition. In the first solution, you can add !important to override existing transitions with that class. That’s messy though. It doesn’t work if elsewhere in the stylesheet !important is used. A better solution would be to add to each element with a transition that it should inherit the transition properties if that transition class is applied. I didn’t like that solution either though. It’s a lot of work and it goes against my component-based approach of writing CSS.

My solution was to not try to emulate the MacOS transition. Instead I:

1. Hide all content and change the background color at once
2. Fade in the content again with the new theme colors

As a result, the quick transition of the links goes unnoticed. Now this only works because there are no elements with long transitions. Try it:

(Sorry for the changing scrolling position. That’s due to the content differences for dark and light mode. Another reason to put the theme controls at the top of the page!)

Implementation of a dark mode design

Without going into technical details, I think it’s worth mentioning that adding a dark mode to a website is easy. Using custom properties (CSS variables) this is mostly a matter of replacing existing color declarations. Don’t forget shorthand properties like border and box-shadow though!

I found adding the dark theme to this website was a nice exercise in learning how to use custom properties. You can have a look at the Codepen above to see how I did it. After checking a couple of tutorials, I ended up copying much of this example.

Have fun

“Dark mode is the most desired yet non-priority feature ever”, someone said on a design forum. That’s hard to prove, but there are some big fans of dark mode out there. If you get the chance to design one, you can be sure some will love it. So have fun designing!

If you aren’t certain yet whether or not your product needs a dark mode, here’s the post I mentioned in the introduction: Do I have to add a dark mode now? If you are though, here’s more about how I implemen­ted my dark mode.