Dark mode with almost no CSS
Feep! now has a dark mode theme! The stylesheet for the site is a fairly minimal set of overrides on top of the browser default stylesheet, so adding this support was actually pretty straightforward, though there were a few complications.
The theme is set up to follow your system settings; you can switch back and forth in your browser’s developer tools if you’re curious what the one you can’t see looks like.
Enable dark mode
You can actually set up dark mode with no CSS, by adding a <meta> element to your HTML’s <head>:
<meta name="color-scheme" content="light dark">
However, you may as well do it in CSS:
html {color-scheme: light dark}
Interestingly, you can set color-scheme on arbitrary elements, and specify only light or dark to force a specific mode. I guess this might be useful if you’re progressively adding dark mode support to a site and have a component with styles that haven’t been migrated yet; you could set color-scheme: light and have it be ugly but usable.
Either way, if you haven’t done a ton of customization this will actually get you most of the way to a dark theme already: it enables the browser’s native dark mode stylesheet, which will automatically adjust the default colors for backgrounds, text, controls, and so on. If you haven’t customized any colors, this is probably all you need.
Pick your colors
However, a site with no custom colors is a rare sight indeed, so you’ll probably need to do at least a little bit of tweaking. Even with my minimalist aesthetic, I still had a few “brand” colors on the results page, and I needed to tweak them for dark mode so they blended in better against the dark background.
Of course, this brought the question of what to change the colors to. I’m not a graphic designer, so I don’t really feel like I know what I’m doing here. I tried reading a couple of posts from Atmos and UX Planet which were kind of helpful, but in the end I ended up fiddling with the colors and refreshing the page until I decided it looked all right. I used the OKLCH color space and oklch.com when trying to adjust my colors, on the theory that it might be easier to get what I wanted in a color space with better perceptual linearity, but I don’t actually know how much of a difference that made in practice.
I also did a bit of research into autogenerated color palettes but quickly decided that was far too much complication for what I actually needed.
Say it in CSS
Now you have colors, the next step is to use them; there are several ways to do that, with various tradeoffs between convenience and compatibility. (Also, if you have any of these colors in more than one place you should use CSS variables instead of hardcoding them into each rule, but my stylesheet is so tiny that I didn’t bother.)
The light-dark() function provides a convenient syntax for specifying both colors at once, though it’s only available across browsers since May 2024:
.result a {color: light-dark(#0074D9, #3897FF)}
.result a:visited {color: light-dark(#B10DC9, #B44CC6)}
For making muted colors, you can use CSS system colors and the color-mix function (available cross-browser since 2023) to combine foreground colors with the background color. This also helps with accessibility: if the user has configured the default colors in their browser, creating additional colors by mixing will preserve that preference, whereas setting the colors directly can create a more jarring appearance.
.result {color: color-mix(in srgb, CanvasText, Canvas 20%)}
Finally, the most compatible way to set colors separately for dark mode is to use a prefers-color-scheme media query to override them, though this makes it harder to see both colors at once in the stylesheet:
.result a {color: #0074D9}
.result a:visited {color: #B10DC9}
@media (prefers-color-scheme: dark) {
.result a {color: #3897FF}
.result a:visited {color: #B44CC6}
}
One weird trick
Finally, there were some diagrams on the blog that had hard-coded colors embedded in the image. I could have tried to modify the way these images were generated to render different colors based on theme, but it was simpler to use a CSS filter to invert the brightness while keeping the same hue. I also applied the same change to code blocks temporarily; then I decided that I actually liked the way that looked better than the dark mode code theme that I had been planning to use, so I just kept it.
@media (prefers-color-scheme: dark) {
.mermaid>svg, .dpic-svg>svg, pre code.hljs {filter: invert(100%) hue-rotate(180deg)}
}
You can actually make an entire dark mode this way, though the results aren’t going to be quite as good as adjusting colors manually and it’s hard to override things on a case-by-case basis where needed.
Conclusion
This was a lot easier than the last time I tried to make a dark mode (admittedly some years ago now) and gave up halfway through trying to restyle everything I needed to look right together. Being able to rely on the browsers’ built-in dark mode stylesheet means that it only took about a dozen lines of added CSS to make everything look right.