Six levels of dark mode

It has been reported that CSSence published an essay titled "Six levels of dark mode" that walks designers through increasingly sophisticated ways to support light/dark color schemes on the web. The author — reminded of the visually hidden debate on CSS Naked Day — allegedly noticed that many sites lost dark-mode behavior once their styles were stripped, and set out to codify a practical spectrum of approaches. The piece names stages with punchy labels (Barebone, Basic, Benign, Bold… and a few more), and admits most examples show the dark side — literally.

The spectrum of approaches

At the simplest end is the Barebone: add and let the browser honor the user’s preference. Next comes Basic: the CSS color-scheme property, which gives similar behavior but can be scoped anywhere in the cascade. Benign introduces the new light-dark() color function for succinct dual-color declarations — it has been reported that browser support for light-dark() is limited at the time of writing. Then there’s Bold: the tried-and-true @media (prefers-color-scheme: dark) query, which lets you change more than colors and fully customize the dark theme.

Why designers should care

Why bother? Because dark mode is no longer a novelty — it’s a user expectation, an accessibility consideration, and a moment where small decisions yield big perceived polish. The essay’s tone is equal parts practical and bemused: add a meta tag, use system colors, step up to media queries when you need control. Sound advice wrapped in a field guide; no smoke and mirrors, just incremental steps you can take today. Dark mode: not just a trend, but part of good housekeeping for modern sites.

Sources: cssence.com, Hacker News