feat: add light/dark mode system #9

Merged

brad merged 1 commit from feat/light-dark-mode into main

2026-02-27 00:53:15 -08:00

brad commented

2026-02-27 00:52:17 -08:00

Owner

Summary

Add colors.background role to schema — explicit page surface color (optional, falls back to secondary → white)
Add _compute_chrome() helper — computes translucent border/tint/shadow adapted to surface luminance
Generate --brand-surface, --brand-on-surface, and --brand-chrome-* CSS custom properties in :root
Generate .brand-inverted class that swaps surface/text and flips chrome for opposite mode
Update showcase to use CSS vars for all chrome + add light/dark toggle button
Add .bg-background utility class and --brand-background / --brand-background-rgb vars

Test plan

uv run scripts/build.py passes with full brand.yml
uv run scripts/build.py passes with example.brand.yml (minimal brand)
uv run scripts/validate.py passes
brand.css contains --brand-surface, --brand-on-surface, --brand-chrome-*, and .brand-inverted
Open assets/exports/index.html in browser — toggle works, chrome flips correctly
Heading text passes AA contrast in both modes
Test with a dark background brand — page starts dark, toggle says Light

## Summary - Add `colors.background` role to schema — explicit page surface color (optional, falls back to secondary → white) - Add `_compute_chrome()` helper — computes translucent border/tint/shadow adapted to surface luminance - Generate `--brand-surface`, `--brand-on-surface`, and `--brand-chrome-*` CSS custom properties in `:root` - Generate `.brand-inverted` class that swaps surface/text and flips chrome for opposite mode - Update showcase to use CSS vars for all chrome + add light/dark toggle button - Add `.bg-background` utility class and `--brand-background` / `--brand-background-rgb` vars ## Test plan - [ ] `uv run scripts/build.py` passes with full brand.yml - [ ] `uv run scripts/build.py` passes with example.brand.yml (minimal brand) - [ ] `uv run scripts/validate.py` passes - [ ] `brand.css` contains `--brand-surface`, `--brand-on-surface`, `--brand-chrome-*`, and `.brand-inverted` - [ ] Open `assets/exports/index.html` in browser — toggle works, chrome flips correctly - [ ] Heading text passes AA contrast in both modes - [ ] Test with a dark background brand — page starts dark, toggle says Light

brad added 1 commit

2026-02-27 00:52:17 -08:00

feat: add light/dark mode system via colors.background + .brand-inverted

Validate brand.yml / validate (pull_request) Successful in 20s

Details

8211c14fef

Add explicit colors.background role so page surface is a deliberate
choice (fallback chain: background → secondary → white). Generate
surface/chrome CSS custom properties in brand.css and a .brand-inverted
class that swaps surface and text colors. Update showcase with CSS
var-driven chrome and a light/dark toggle button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>