frontend-theming-dark-light-mode
Installation
SKILL.md
Frontend Theming : Dark and Light Mode
Authoritative reference for evergreen-2026 dark / light theming. The four primitives : color-scheme (declares what the page supports), light-dark() (per-property branch), @media (prefers-color-scheme: dark | light) (rules-block branch), and <picture><source media="(prefers-color-scheme: dark)"> (image branch).
Quick Reference
Baseline status
| Feature | Baseline | Source |
|---|---|---|
color-scheme |
Widely Available since January 2022 | MDN : color-scheme (verified 2026-05-19) |
prefers-color-scheme |
Widely Available since January 2020 | MDN : prefers-color-scheme (verified 2026-05-19) |
light-dark() |
Newly Available since May 2024; becoming Widely Available in 2026 | MDN : light-dark() (verified 2026-05-19) |
Minimum system-followed dark mode (no JS, no toggle)
<meta name="color-scheme" content="light dark">