Designing a Dark Mode Is Harder Than It Looks
Achieving successful dark mode websites with just 8 pro tips
by Joe Honton
In this episode Clarissa tries her hand at creating a dark mode style sheet, and finds out that it isn't just a black and white matter.
Clarissa has honed her CSS design skills around modern typography and classic color theory. But with dark mode schemes 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 had found out long ago — 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 cast an early evening glow instead. 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 else they risked disappearing altogether. Thick faces needed less white or else they started to vibrate. So choosing a suitable value for white really had to wait until the typeface was locked down.
Clarissa decided to use the new SIL typefaces from Adobe Systems. She chose Source Serif Pro by Frank Grießhammer for paragraphs, and Source Sans Pro by Paul D. Hunt for section headings. These had six weights each, giving her plenty of choice for both scannability and splash. Most of her projects also incorporated blocks of computer source code, so Source Code Pro was a natural fit for that.
In the end, Clarissa settled on a standard white for text with a color value of #CCC. She reserved pure white for special cases where the type really needed to bring attention to itself. She discovered that instead of increasing the font weight to produce a bolder look, she could use the same font weight with increased whiteness (all the way up to #FFF) to achieve a brilliance that was both attractive and classy.
The next challenge was saturation. Every color in the original style sheet had been saturated to contrast with the formerly white background. This presented a big problem. Nothing was even close to being readable.
The darkness of a fully saturated red or green or blue, against the new background was awful. This meant that any previously defined color that was used in a textual context, had to be brightened. Of course that required some fiddling around, which was work in itself, but it unfortunately threw the whole color scheme out of balance.
She couldn't just brighten up one --var(blue), there were several other blues used throughout the style sheet, each used for a different purpose in the design. She had to adjust every variation of blue in the style sheet. And the same thing applied for the complementary colors. It was almost as bad as starting from scratch.
But she persevered and finally worked her way through it. Now with those two fundamentals out of the way, it became a matter of going through the style sheet and adjusting every selector that used any attribute that conveys color:
colorbackground-colorborder-coloroutline-colortext-decoration-color
Foreground, background and border colors were the bulk of the work, but once she got started, everything fell into place without fuss. Border colors tended to be shades of gray, which required a bit of finicky tuning, but since she was staying away from colored borders, there was nothing special to it.
The outline-color attribute came into play for navigating between elements using the TAB key. For her style sheet she went middle of the road *:focus {outline: 1px dotted #777}.
For hyperlinks, there was more choice. As was her custom, she removed the default, text-decoration: none, and replaced it with a dotted underline on hover, a.border-bottom:hover {var(--yellow) 1px dotted} with a yellow definition of #ffffa4 to match the hyperlink text.
With her preliminary doubts finally overcome, Clarissa felt confident that her dark mode style sheet was going to work out after all. Her 8 pro tips for a successful dark mode theme:
- Pure black borders lines and box shadows
#000. - Dark black button backgrounds
#222with darker hovers#111. - Soft black page background
#333, three shades less than pure black. - Gray for tab-focused outlines
#777. - Gentle white for text
#CCC, three shades less than pure white. - Bright white for headings
#DDDor#EEE. - Pure white for bold text
#FFF. - Colors with increased brightness and reduced saturation to prevent vibration.
The next day morning Clarissa walked into the office thinking that she'd be met with cheers from her team. No one said a thing.
After lunch, she began to wonder if the crew's silence meant that they didn't like it.
"So, does anyone have any comments about the new website design?" she ventured.
Ken was deep into some DevOps rabbit hole. "New website?" he asked, without interest.
Meanwhile, Ernesto was trying to find his way out of callback hell. "Er, didn't check it out. What's up?"
"C'mon guys!" Clarissa answered with uncharacteristic abruptness, "It's the new dark mode you've been asking for."
Tlik, tik . . . click.
"Oh yeah . . . dark mode, baby!" Ken thundered in a mock "Don LaFontaine" movie trailer voice-over.
"So cool!" Ernesto chimed in.
Clarissa knew that was the highest praise she was going to get out of this crowd. So she counted it as a win.
No minifig characters were harmed in the production of this Tangled Web Services episode.
Follow the adventures of Antoní, Bjørne, Clarissa, Devin, Ernesto, Ivana, Ken and the gang as Tangled Web Services boldly goes where tech has gone before.
