Six Levels of Dark Mode (2024)
This web dev guide explores eight distinct technical levels for implementing dark mode, from simple meta tags to advanced CSS :has() and JavaScript. It's a hit on HN for its practical, progressive approach to a ubiquitous UI feature, prompting discussions on performance, accessibility, and user experience. The article addresses common pain points like the "flashbang" effect, providing tangible solutions for developers.
The Lowdown
This article, "Six Levels of Dark Mode," provides a comprehensive technical breakdown of various methods for implementing dark mode on websites. Inspired by observations during CSS Naked Day, the author details a progressive approach, expanding beyond the initial "six levels" to ultimately eight distinct techniques.
- Barebone (Level 1): Utilizing the
<meta name="color-scheme" content="light dark">tag for browser-level dark mode support. - Basic (Level 2): Applying
html { color-scheme: light dark; }in CSS, offering similar functionality to the meta tag but with different application scopes. - Benign (Level 3): Employing the
light-dark()CSS color function for simple color switching based on the active scheme. - Bold (Level 4): Leveraging the
@media (prefers-color-scheme: dark)media query for extensive customization beyond just color changes. - Bisectional (Level 5): Using
<link media="screen and (prefers-color-scheme:dark)" rel="stylesheet" href="dark.css">to load scheme-specific stylesheets. - Ballistic (Level 6): Implementing JavaScript's
window.matchMedia('(prefers-color-scheme:dark)')for dynamic scheme detection and manipulation. - Beyond (Level 7): Discussing the creation of a user-facing color scheme switcher, emphasizing the importance of a tri-state (auto, light, dark) preference.
- Beguiling (Level 8): Introducing modern CSS
:has()pseudo-class for more elegant, class-less or attribute-less scheme switcher implementations.
The article highlights that these levels can be mixed and matched, and briefly touches upon related topics like accessibility during CSS Naked Day and specific browser behaviors regarding printing in dark mode. It serves as a practical guide for web developers aiming to implement robust and user-friendly dark mode experiences.
The Gossip
Flashbang Frustration
Users express frustration over the "flash of unstyled content" or "flashbang" effect when loading a page with dark mode enabled. Discussion revolves around how to prevent this initial bright flicker, with suggestions ranging from making dark mode the default, adding early inline styles, or displaying a temporary black screen, though a definitive client-side solution remains elusive for some.
Levels & Laughter
Commenters playfully point out the discrepancy between the article's "Six Levels" title and its actual eight detailed levels, leading to humorous additions and observations about the topic's nuances. This theme also includes an obligatory XKCD reference, highlighting the enduring complexity of seemingly simple web development tasks.
OLED Optimization Opinions
A significant portion of the discussion centers on the specific properties of OLED displays, debating whether "pure black" dark modes genuinely offer significant battery savings or reduce screen burn-in compared to dark grey alternatives. While some advocate for pure black to extend display life, others provide data and arguments suggesting the practical difference is minimal for typical content and burn-in is primarily driven by bright elements.
Browser Behavior & Broader Solutions
Commenters delve into specific browser rendering behaviors, such as the fact that browsers typically download all linked stylesheets regardless of media query matches, contrary to the article's suggestion. Some also propose broader, standardized solutions like enhanced "Reader Mode" in browsers to empower users with more control over page appearance, critiquing current browser implementations for their limitations or commercial biases.