--- slug: sample-dark-mode-toggle title: Dark mode toggle — engineering design prd: fastpace/docs/prd/sample-dark-mode-toggle.md status: approved risk: low authors: [you@example.com] created: 2026-04-05 updated: 2026-04-12 references: [] sample: true # delete this file once you're done test-driving --- # ERD — Dark mode toggle > Sample artifact seeded by `fastpace init --sample`. Delete when done. ## Approach The site already exposes color tokens via CSS variables on `:root`. We add a `data-theme="light"` attribute on `` that overrides those variables to a light palette. A small inline script reads `localStorage.theme` (or `prefers-color-scheme`) before the first paint to avoid flash-of-wrong-theme. ## Components | Surface | Change | |---|---| | `` inline script | Reads `localStorage.theme` and sets `` *before* CSS loads. | | `global.css` `:root[data-theme="light"]` block | New light-mode token overrides. | | `Base.astro` nav | Adds a `