# ADR-169: adam-mode — light theme toggle for the three.js realtime demo | Field | Value | |-------|-------| | **Status** | Proposed | | **Date** | 2026-06-02 | | **Deciders** | ruv | | **Codename** | **adam-mode** | | **Scope** | `examples/three.js/demos/05-skinned-realtime.html` (primary), demos 01–04 (follow-on) | | **Relates to** | ADR-019 (sensing-only UI), ADR-035 (live sensing UI accuracy) | | **Tracking issue** | none yet | --- ## 1. Context `examples/three.js/demos/05-skinned-realtime.html` (build stamp `2026-05-15-fps-tune`) is the live MediaPipe → Mixamo retargeting + ESP32 CSI overlay demo. It currently ships a single, opinionated **dark theme**: - Body `--bg: #050507` (near-black), `--text: #d8c69a` (warm beige). - Amber accents (`--amber: #ffb840`, `--amber-hot: #ffe09f`) on panels and controls. - Two full-screen overlays: a radial-vignette `.overlay-frame` and a 50%-opacity CRT-style `.scanlines` layer. - Three.js scene matches: `scene.background = new THREE.Color(0x050507)` and `scene.fog = new THREE.FogExp2(0x050507, 0.06)` (lines 269–270). The dark/amber CRT aesthetic is intentional for screen-recording and "command-centre" feel, but it has real failure modes: 1. **Daylight visibility** — Demoing the live capture on a laptop in a sunlit room is unreadable; the dark background absorbs ambient glare and the amber-on-dark contrast disappears. 2. **Recording for embedded/print contexts** — When the demo's screen is captured for documentation, blog posts, or HA blueprints, the dark theme bleeds into surrounding white content and looks heavy. 3. **Accessibility** — A subset of users with light-sensitive retinas (the inverse of typical photophobia) report the high amber-on-near-black combination strains them; high-contrast light themes are easier. 4. **Operator pairing with a light-mode IDE** — Many operators run a light-mode browser alongside a dark-mode IDE and want the demo to match the browser, not the IDE. A toggle is the right answer because none of these reasons are universal — some sessions and some users want each mode. ### 1.1 What this ADR is *not* - Not a redesign. The amber accent stays; only the surface colours and overlays swap. The information density, panel layout, and three.js scene geometry are unchanged. - Not a multi-theme system. We add exactly two themes: the existing dark (default, unnamed) and **adam-mode** (light). Future themes would need a new ADR. - Not a backend / data-model change. Pure presentation. - Not yet propagated to demos 01–04. Those follow-on after adam-mode lands on demo 05 and is validated. ## 2. Decision Add a **client-side theme toggle** to `05-skinned-realtime.html` that switches between the existing dark theme and a new light theme called **adam-mode**, driven by a `data-theme="adam"` attribute on `` plus a sibling `:root[data-theme="adam"]` CSS block that re-defines the existing custom properties. A new toggle button in the existing `#helpers` panel switches between modes and persists the choice in `localStorage` under the key `ruview.theme`. ### 2.1 CSS — the colour swap Add immediately after the existing `:root { ... }` block in `