Designing a Dark Mode Is Harder Than It Looks

Eight tips for converting your CSS from light to dark

Image courtesy of the author.

Dark mode style sheets are all the rage, but they aren’t just a black-and-white matter. Scannability and readability are important aspects of proper design too. In this episode of Tangled Web Services, Clarissa tries her hand at creating a dark mode style sheet, and finds out that it’s a bit trickier than it looks.

Clarissa, the design and marketing pro behind TWS, has honed her CSS design skills around modern typography and classic color theory. But with dark mode schemes suddenly all the rage, she wanted to try her hand at something a bit different.

Using a proven light mode style sheet as a starting point, Clarissa began work on its transition to dark mode.

Thankfully, all of the color rules had been declared using CSS variables like var(--blue). So most of the work ahead of her would simply be to declare new color values for the variables. Or so she thought.

The first challenge was a black-and-white matter… er, var(--black) and var(--white). What’s the best background color for the page? She knew what paper makers, fine art printers, and book designers have known for ages — that pure white paper is hard on the eyes. So she suspected that the inverse would also be true, that a pure black background would not be suitable for reading text.

After trial and error, Clarissa settled on a standard black background color value of #333. It had just enough luminosity to get away from the starry midnight effect and to instead cast an early evening glow. This choice also had the benefit of allowing for several darker shades of black to be used on background accents for block elements like blockquote, pre, and figcaption, and for inline elements like code.

She was also pleased with how black-on-black borders turned out. Simple lines of one- or two-pixel width, using darker shades of black, added a sophisticated touch to her designs. Like black velvet.

Choosing the right shade of white for her typography was a bit more difficult. The best readability seemed to depend on the weight of the typeface. Thin faces needed more whiteness or they risked disappearing altogether. Thick faces needed less…