mirror of
https://github.com/lynchaos/ashvale-station.git
synced 2026-09-12 12:47:49 +00:00
kemal
aea740e85b
Auto (follow the system), light, or dark. Auto is a real preference rather than the absence of one, so it tracks prefers-color-scheme live rather than only at load. Stored in localStorage, not the station's settings overlay: a theme belongs to the screen you are reading on, not to the weather station. Control in the header for one click and in Settings for the explicit three-way choice. The markup is dark-first Tailwind utilities. Adding a dark: variant to several hundred class attributes would have been a large diff with a large blast radius, so light is an overlay that remaps the slate scale and the accent hues under [data-theme=light]. The dark path is byte-identical: nothing is re-specified unless the attribute is set. Chart.js keeps its own copy of every colour and cannot follow a CSS class change, so the charts read the same tokens from the computed style and are re-rendered on switch. Three things the screenshots and measurements caught that reading would not: - Accent text is the 200-400 shades, picked to glow on black. On white they wash out. Remapped to the 600-700 shade of the same hue so the colour coding survives. - My first remap listed exact class names and silently missed every opacity variant, because text-amber-200/60 is a different class. Measured at 1.02:1. Now matched on the hue prefix. - The value-changed flash is a pale indigo that dropped a headline reading to 2.06:1 on white for half a second, which is precisely when you are looking at it. Now theme-aware. Contrast measured with alpha properly composited to the page ground: light 212 nodes below WCAG AA against dark's 208, so light is no worse than the dark theme it mirrors. The remainder is the design's deliberately quiet tertiary text, present in both. Layout re-verified: six tabs across three viewports in both themes, twelve combinations, zero clipping and zero console errors.