Six Levels of Dark Mode
7 hours ago
- #CSS techniques
- #web development
- #dark mode
- 1. The meta tag `<meta name="color-scheme" content="light dark">` enables basic light/dark mode switching without CSS, respecting user preferences via browser and OS settings.
- 2. The CSS `color-scheme` property (`html { color-scheme: light dark; }`) offers similar functionality but allows per-element application, providing more flexibility than the meta tag.
- 3. The `light-dark()` CSS function (`background-color: light-dark(black, white);`) simplifies color adjustments for light and dark modes, though browser support is currently limited.
- 4. Media queries (`@media (prefers-color-scheme: dark)`) allow extensive customization beyond colors, such as modifying images or shadows, for maximum design control.
- 5. Using the `media` attribute in HTML (`<link media="screen and (prefers-color-scheme:light)" rel="stylesheet" href="light.css">`) enables separate CSS files for each scheme, optimizing downloads.
- 6. JavaScript's `matchMedia` function (`window.matchMedia('(prefers-color-scheme:dark)')`) allows dynamic detection and handling of color scheme preferences for interactive features.
- 7. Building a color scheme switcher on top of user preferences adds an 'Automatic' option, enabling three modes (light, dark, auto) for enhanced user control.
- 8. The CSS `:has()` selector (`html:has(meta[name="color-scheme"][content="dark"])`) can detect meta tag changes, eliminating the need for additional classes or attributes in switchers.