Simple Dark Mode with uBlock Origin

As dark mode becomes more popular, it can be jarring to switch tabs to a website which doesn't support it. To fix this, there are extensions like Stylus to apply custom styles to sites and Dark Reader for a more specialised experience.

I've used Dark Reader in the past, and it tended to break or not look right for more complicated websites so I gave up on it. There are a handful of websites I use often enough that I want a dark mode for, but using an entire extension with "Access your data for all websites" seemed a bit overkill. Of course, there's also Firefox's built-in userContent.css but that's kind of deprecated and disabled by default.

It's a good thing then that uBlock Origin is one of those extensions that's always installed; after all the web is unusable without it. And with its custom filter rules, applying custom styles is straight forward.

A simple way to apply a dark mode is to invert the colours on a page. I'll use Hacker News as an example as it has a simple design with no images.

Under uBlock Origin's settings dashboard, under the "My filters" tab, we can add the following rules:

news.ycombinator.com##html:style(filter: invert(95%) !important;)
news.ycombinator.com##td[bgcolor="#ff6600"]:style(filter: invert(105%) !important;)

The first line inverts the colours so light colours become dark and vice versa. Since we're inverting, Hacker News' iconic orange branding will turn blue. To restore the orange, the second line un-inverts those specific orange elements back around.

Things get more complicated with images and video. Inverting pictures will completely ruin them. At the same time, we often do want to invert icons which can be images too. Then there's the fact that a lot of websites use images with white backgrounds, so they can look a bit garish against a dark theme. Some websites use randomly generates class names too, so we can't be too picky on those. The list goes on.

To keep it short, there's no easy solution and most websites will require un-inverting multiple selectors at various hierarchies, causing a headache. It's just not worth it. I guess these are the same reasons Dark Reader often didn't look right.

For simple websites like Hacker News, using uBlock Origin is good enough. And it works on Firefox on Android too! For other websites, an easier solution is to just change the main background colour. That's kind of my preference anyway.

Thanks for reading.