Get the latest tech news

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.

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. 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. 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.

Get the Android app