Theme — Light / Dark / Auto
The top-bar segmented control flips the SPA between three modes. Choice persists across reloads (localStorage["kilasec.theme"]).
| Mode | What it does |
|---|---|
| Light | Warm-paper background, slate ink, cobalt accent. Best for sustained reading in daylight. |
| Dark | Deep navy background, soft-white ink, cobalt accent. Best for low-light operator work. |
| Auto | Picks Light when your local hour is 06:00–18:59, Dark otherwise. Recheck every minute; long-open tabs flip at the boundary. |
A clock next to the toggle shows your local time + zone — so you can see why Auto picked the mode it did.
Why a clock?
Because Auto changing your theme silently is confusing. The clock makes the decision explicable without an explanation.
How it's wired
CSS variables on <html> (theme-light / theme-dark class). Every color in the SPA references those variables, so switching themes is one class swap on <html> — no re-render. Look at ui-v2/src/index.css for the variable definitions.
→ See feature/identity-from-network's commit for the implementation.