CSS accommodations for dark mode
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.