| description | Use when adding dark mode to a website or app, choosing between system-followed-only and user-toggle modes, eliminating duplicated `@media (prefers-color-scheme: dark) { ... }` rules with `light-dark()`, fixing a white flash on reload (FOUC), getting scrollbars and native form controls (`<input type="checkbox">`, `<input type="date">`, `<select>`) to render in dark theme, persisting a user theme choice across reloads, or building a three-state toggle (system / light / dark). Use when reviewing a dark mode that already exists and assessing whether it covers all the cases below. Prevents the six dominant dark-mode failures : using `light-dark()` without declaring `color-scheme: light dark` on `:root` (always returns the light value), forgetting `color-scheme` entirely so the page background goes dark but scrollbars and checkboxes stay light, applying the theme via `useEffect` AFTER first paint causing a white flash on every reload, duplicating every rule in `@media (prefers-color-scheme: dark)` instead of using `light-dark()`, missing `aria-pressed` on the toggle button, and forcing dark mode for all users regardless of system preference. Covers the `color-scheme` property (values : `normal`, `light`, `dark`, `light dark`, `only light`, `only dark` and its purpose : it informs the user agent which color schemes the page supports so the UA can theme its own UI : scrollbars, form controls, spellcheck underlines, canvas surface), the `<meta name= "color-scheme">` tag, the `light-dark(<light>, <dark>)` function (Baseline 2024, requires `color-scheme` to function), the `@media (prefers-color-scheme: dark | light)` media query and its default `light` value when the user has no preference, the `<picture>` element with `<source media="(prefers-color-scheme: dark)">` for theme-specific images, the `data-theme` attribute override pattern, localStorage persistence, the head-script pattern for FOUC prevention (read storage, set attribute BEFORE CSS executes), and the three-state toggle architecture (system / light / dark with explicit user choice tracked separately from system preference). Keywords: color-scheme, light-dark, light-dark function, prefers-color-scheme, dark mode, light mode, system theme, theme toggle, data-theme, FOUC, flash of unstyled, no flash, localStorage theme, meta color-scheme, only light, only dark, Auto Dark Theme, picture prefers-color-scheme, theme persistence, three-state toggle, system default, manual override, matchMedia prefers-color-scheme, dark mode broken, scrollbar wrong color, scrollbar still light, form controls wrong color, checkbox light in dark mode, date picker light in dark mode, theme not persisting, white flash on reload, theme flashes on load, how to add dark mode, how to do dark mode in CSS, why does dark mode flash, how to remember theme choice, how to follow system dark mode, how to make dark mode toggle, is light-dark CSS supported.
|
