You Can Give A Website Dark Mode With Just One CSS Property

You Can Give A Website Dark Mode With Just One CSS Property was first published on Farai's Codelab.

I’m too lazy to do all the work required to make a proper dark mode for now so I’m trying to find a quick fix. I tried to use filter: invert(100%) on the body but it would literally invert everything, including images and emojis. I was about to give up on it before I came across Jim Nielsen’s post on the color-scheme property which tells the browser what color schemes a site (or element) supports and changes the default color based on the user’s preferences. To use it, you just need to specify the color-scheme property on the :root element.

:root {
    color-scheme: light dark;
}

This supports both light and dark mode. You can also just set light or dark as well as apply the color-scheme property to a specific element. In some environments (like email), you can also apply a <meta name="color-scheme"> tag.

Note that it doesn’t work in Firefox yet.

Issues

When I tried this the link colors didn’t change in Safari resulting in this ugly and inaccessible style. It worked perfectly fine in Chromium browsers however.

Jim had the same issue. Because of that, I ended up implementing some sort of dark mode using Apple’s dynamic system colors. The CSS Colors Module 4 has system colors corresponding to the OS’s UI but they don’t have good support so I just copy-pasted the RGB values. Temper Temper explains how to “fix” dark mode on Safari better than I have.

Also, looking at color scheme’s spec, there was this scary warning noting that they don’t guarantee a color palette.

The light and dark color schemes don’t represent an exact color palette (such as black-and-white), but a range of possible palettes. To guarantee specific colors, authors must specify those colors themselves. Note also that, consequently, pairing default or colors with author-specified colors cannot guarantee any particular contrast level; it might be necessary to set both foreground and background colors together to ensure legibility.

Given those issues my attempt to implement dark mode lazily has become the start of an interesting journey. Still, it’s worth putting in.

Additional Reading

Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag on web.dev

Dark Mode Support in WebKit on webkit.org

Thanks for reading! If you liked this post, consider supporting my work by:

sharing my work,

refering me for a job (or hire me for freelance work),

sponsoring me on Patreon,

buying Me A Coffee,

buying Me A Ko-Fi,

sending me a tip on Paypal,

~~buy something on Amazon with my affiliate link (I’ll earn a commision on this as an amazon affiliate)~~,