Ian's notes

Adding dark mode to a style sheet involves adding a media query to detect the user’s preference:

@media (prefers-color-scheme: dark) {
    body {
	filter: invert(100); /*Functional, but lazy*/
    }
}

It’s possible to have a global, default style sheet which is then overridden by the dark media query, or to split the sheet into light and dark queries.

You can test this functionality on this site, the colours are dictated by the colour scheme preference detected by your browser. Take note though, that if you’ve set the privacy.resistFingerprinting flag in Firefox, then your preference will always be set to light, as documented.