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…