---
id: 42d42d07-1478-49ed-a458-528bff123eff
title: Tokyo Night light theme (prefers-color-scheme)
state: closed
labels:
- area:render
assignees: []
milestone: m6-polish
created: 2026-09-10T05:33:13.658101794Z
updated: 2026-09-10T05:49:54.144585820Z
---
Context: Owner review round. Light theme must respect OS setting, default dark.
Tasks:
1. Refactor style.css to CSS variables: `:root` = Tokyo Night dark (current values); `@media (prefers-color-scheme: light)` = Tokyo Night Light palette (bg #d5d6db-ish storm? use official tokyonight-light: bg #d5d6db, fg #343b58, blue #34548a, cyan #0f4b6e, red #8c4351, green #33635c — verify sane contrast, adjust only if unreadable). All rules reference vars; NO duplicated rule bodies.
2. `theme-color` meta: two tags with media attrs (dark/light) — coordinate with #16 (if #16 merged first, extend it; else include both tags here and note the overlap to supervisor).
3. `color-scheme: dark light` on :root (already? verify) so form controls follow browser.
4. Tests: CSS var asserts (no hardcoded palette hex outside :root/light blocks — grep test on limited palette list), light media block present, theme-color tags present.
5. Budget: still <15KB total.
Success rubric:
- [ ] Dark unchanged pixel-wise (eyeball index before/after); light readable (supervisor checks); OS switch respected with zero JS.
Swarm: Owl. Branch `m6/light-theme`. Coordinate CSS with #18 owner (both touch style.css — merge #18 first, rebase this).