Prisma saysDark mode = CSS variables flipped via prefers-color-scheme plus the color-scheme property.
The clean pattern: define your palette as variables on :root, then override them inside @media (prefers-color-scheme: dark). Add color-scheme: light dark so native controls follow. For a manual toggle, swap a data-theme attribute on the root and key the variables off it.
Power-ups you unlock
Variables on :root, overridden in the dark query
color-scheme: light dark themes native UI
Manual toggle via [data-theme] on the root
One palette source → both themes
Jank the Janitor attacks — common mistakes
Hardcoding colors instead of variables
Low contrast in one theme
Forgetting color-scheme so controls clash
Boss battleImplement auto dark mode with variables, then add a manual [data-theme="dark"] override.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>:root{--bg:#f5f0ff;--fg:#1a1133}@media(prefers-color-scheme:dark){:root{--bg:#06040d;--fg:#e6e0ff}}[data-theme=dark]{--bg:#06040d;--fg:#e6e0ff}body{background:var(--bg);color:var(--fg);padding:20px}</style></head><body><h1>auto + manual dark mode</h1></body></html>