forked from bots-garden/ori
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 1 | # Managed by IssueSpec. Hand edits are welcome; keep the schema valid. |
| 2 | id: 13 | |
| 3 | title: Themes light and dark | |
| 4 | state: closed | |
| 5 | author: | |
| 6 | name: k33g | |
| 7 | email: ph.charriere@gmail.com | |
| 8 | createdAt: 2026-09-17T22:15:20.392Z | |
| 9 | updatedAt: 2026-09-17T23:20:00.000Z | |
| 10 | labels: [] | |
| 11 | body: | | |
| 12 | Let the user choose between a light and a dark theme, light by default. | |
| 13 | ||
| 14 | Implemented (2026-09-17): | |
| 15 | - `ui/src/theme.ts`: zustand store (`theme`: light | dark), `setTheme` / `toggleTheme` / | |
| 16 | `resetTheme`, `isTheme` guard; remembered in localStorage `ori.theme`; stamps | |
| 17 | `data-theme` on `<html>` at module load (before the first render) and on every change. | |
| 18 | - `app.css`: the dark palette moved from `@media (prefers-color-scheme: dark)` to | |
| 19 | `:root[data-theme="dark"]`; `color-scheme` follows. The OS preference is no longer | |
| 20 | followed (user's decision: two themes only, light default). | |
| 21 | - Header button ☾ / ☀ (`aria-label` "Switch to dark/light theme") in `App.tsx`; | |
| 22 | `MonacoViewer` picks `vs-dark` / `light` from the store; the terminal stays dark. | |
| 23 | - Tests: +6 store, +1 App (124 vitest total). Quality gate PASS (run #16). | |
| 24 | - Docs: how-to `switch-the-theme` (EN + FR), architecture explanation, indexes, README. | |
| 25 | tasks: [] | |
| 26 | comments: [] |