From cf391286a21f865586bac1b6c672eae4c2eca1d2 Mon Sep 17 00:00:00 2001 From: Paul Trowbridge Date: Sat, 2 May 2026 22:59:21 -0400 Subject: [PATCH] Improve theme toggle icons; document light/dark in CLAUDE.md Replace Bootstrap fill icons with Feather-style stroke SVGs (sun with rays + crescent moon) in StatusBar toggle. Co-Authored-By: Claude Sonnet 4.6 --- CLAUDE.md | 11 +++++++++++ ui/src/components/StatusBar.jsx | 16 ++++++++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8283f04..45cc615 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -97,6 +97,17 @@ All three operations follow the same structure: insert a `pf.log` row in a CTE, --- +## Light / dark mode + +Theme state lives in `ui/src/theme.jsx` — a React context (`ThemeContext`) with a `ThemeProvider` that wraps the app in `main.jsx`. + +- **Storage key:** `pf_dark` in `localStorage`; falls back to `window.matchMedia('(prefers-color-scheme: dark)')` on first visit +- **Toggle:** `setDark(d => !d)` in `StatusBar.jsx`; effect writes `localStorage` and toggles the `.dark` class on `` +- **CSS:** `ui/src/index.css` defines CSS custom properties under `:root` (light) and `.dark`. All Tailwind color overrides are written as `.dark .bg-white { ... }` etc. — no Tailwind dark-mode config needed +- **Palette:** dark mode uses Perspective's "Pro Dark" colours (`--bg-primary: #242526`, panels `#2a2c2f`, gridlines `#3b3f46`, text `#c5c9d0`) +- **Perspective viewer:** `Forecast.jsx` calls `viewer.setAttribute('theme', dark ? 'Pro Dark' : 'Pro Light')` both on initial load and in a `useEffect([dark, versionId])` so the viewer stays in sync when the toggle fires +- **Consuming the theme:** `import useTheme from '../theme.jsx'` then `const { dark, setDark } = useTheme()` + ## Known issues / active work (see todo.md for detail) - Operation panel (Scale/Recode/Clone) wiring to API is a stub — needs completion diff --git a/ui/src/components/StatusBar.jsx b/ui/src/components/StatusBar.jsx index 3da49cf..55784cd 100644 --- a/ui/src/components/StatusBar.jsx +++ b/ui/src/components/StatusBar.jsx @@ -48,12 +48,20 @@ export default function StatusBar({ view, sources = [], sourceId, setSourceId, v title={dark ? 'Switch to light mode' : 'Switch to dark mode'} > {dark ? ( - - + + + + + + + + + + ) : ( - - + + )}