Home | Blog | Dark Mode

Best viewed in Mozilla Firefox:
A dark mode hack without HTML changes

This website is maintained maintained the old fashioned way: as artisanal, handwritten HTML with embedded CSS. And I'm not going to change that. But a discussion on Lobsters reminded me of a neat trick: one can supply stylesheets through Link headers ... well, as long as you're running Firefox.

So enjoy every page on this website in your dimly lit basement hacker cave without burning your eyes – even plaintext files.

How

With some .htaccess magic, a Link header, equivalent to the <link> HTML element, is appended to every response. It contains the style sheet, minimally urlencoded (whitespace and octothorpes), as a data: URI. Actually, there are two such headers: one is wrapping the CSS in a @media (prefers-color-scheme: dark) block, the other makes use of Firefox' Alternate Stylesheets feature to allow toggling using the View → Page Style menu.

link: <data:text/css,「urlencoded CSS rules」>; rel="alternate stylesheet"; title="Dark Mode"
link: <data:text/css,@media(prefers-color-scheme:dark){「urlencoded CSS rules」}>; rel="stylesheet"

Here are the htaccess rules, as plaintext.

Why

Why not? It was a fun half-hour excercise (even though I'll probably never use it myself). Sure, those using browsers developed by the world's largest advertisement conglomerate can't enjoy it, but that's on them.

Being able to style non-HTML resources (even a little), is definetly cool, though.