April 19, 2026
Fifty Shades of Night Mode
Six Levels of Dark Mode
Dark Mode Drama: Six Levels ignite black or gray fights and 'make it scroll' pleas
TLDR: The post explains six ways sites can do dark mode, starting with a simple one-line fix many still miss. Commenters sparred over pure black vs soft gray and praised a proper 3-option switch, highlighting comfort, battery talk, and the need to let users choose how dark they want their web.
Six levels of dark mode? The internet came for the tech, stayed for the comments. The post walks through how websites can respect your device’s theme—from a tiny one-line tag to fancier CSS tricks—after the author noticed on “CSS Naked Day” that many sites forgot the basics. There’s even a new CSS color function with shaky support, and the classic “follow-your-system-preference” media query. That’s the homework. The class gossip? Way louder.
Top vibe: “It’s 2024—why is this still hard?” One commenter just dropped “2024” and exited. Others wanted spectacle: “Would’ve been cool if the levels came into effect while you scrolled,” begged one, asking for a live demo glow-up. The obligatory xkcd link landed on cue. A nerd war flared over the perfect shade of dark: pure black for OLED battery savings (maybe?), or gentle gray for your retinas—“less inky, more comfy.” Meanwhile, a veteran voice cheered the three-way toggle (light/dark/system) as the real hero, because choice matters. The thread split into two camps: the “just add the one-line fix, please” crowd versus the “craft every color lovingly” artists. One essay, six levels, endless feels—and yes, dark mode drama is still undefeated.
Key Points
- •The article defines six escalating levels of implementing light/dark mode, focusing on color scheme switching.
- •Level 1 uses an HTML color-scheme meta tag to opt into user-preferred color schemes across the whole document.
- •Level 2 uses the CSS `color-scheme` property (e.g., on html) and suggests leveraging CSS system colors; it can be scoped beyond root.
- •Level 3 introduces the `light-dark()` color function to specify distinct light/dark colors, noting limited current browser support.
- •Level 4 references the `@media (prefers-color-scheme: dark)` media query as a more targeted approach.