Low-effort dark mode
2023-03-24T17:34:02+00:00 • goncalomb • site,meta
The other day I was considering redoing the design of this site using a dark theme. But I ended up just implementing a low-effort dark mode.
Click the moon/sun button on the header to change the mode.
I tested a simple CSS filter: invert(1); and it worked quite nicely. In combination with prefers-color-scheme it's possible to create a simple dark mode that changes depending on the user's OS/browser settings.
@media (prefers-color-scheme: dark) {
html {
filter: invert(1);
}
img, video, iframe {
filter: brightness(.85) invert(1)
}
}
Some elements (img, video and iframe) receive a second inverted filter to revert them to the original colors. The brightness is also reduced to avoid mostly white elements looking too bright.
That snippet works by respecting the user settings on OSs that support it. But with some simple JS and CSS trickery, we can get a fully functional and persistent mode button. Inspect the code if you want, it's not obfuscated.
Overall, I think it works well because the site uses very few contrasting elements and flat colors (originally from flatuicolors.com). It's also nice that the blue and orange used for the text are complementary colors.
The blog posts still need some design tweaks. Some elements like the code blocks just look ugly, but that's mainly because I'm still using a super old version of Bootstrap (3.4.1). I need to take care of that another day.