feat: add dark mode with theme toggle #297

Merged

john merged 1 commit from feat/dark-mode into dev

2026-07-22 06:11:50 +00:00

john commented

2026-07-22 06:08:02 +00:00

Owner

Summary

Add dark mode support with a toggle button in the sidebar footer.

Changes

CSS variables: data-theme="dark" block overrides all 60+ design tokens (backgrounds, text, borders, accent colors, module colors, status colors)
Theme toggle: Sun/moon button in the sidebar footer, persists to localStorage
Flash prevention: Inline script in index.html reads localStorage or OS preference before first paint
Hardcoded color cleanup: Replaced 7 hardcoded hex values in Registry.tsx and MonitoringBridge.tsx with CSS variables

Design decisions

Module accent colors are lightened slightly for dark background readability
Status color background opacity boosted from 0.06 to 0.12 for dark mode legibility
Native dark scrollbars and form controls via color-scheme property
Default follows OS preference; explicit choice overrides and persists

## Summary Add dark mode support with a toggle button in the sidebar footer. ## Changes - **CSS variables**: data-theme="dark" block overrides all 60+ design tokens (backgrounds, text, borders, accent colors, module colors, status colors) - **Theme toggle**: Sun/moon button in the sidebar footer, persists to localStorage - **Flash prevention**: Inline script in index.html reads localStorage or OS preference before first paint - **Hardcoded color cleanup**: Replaced 7 hardcoded hex values in Registry.tsx and MonitoringBridge.tsx with CSS variables ## Design decisions - Module accent colors are lightened slightly for dark background readability - Status color background opacity boosted from 0.06 to 0.12 for dark mode legibility - Native dark scrollbars and form controls via color-scheme property - Default follows OS preference; explicit choice overrides and persists

john added 1 commit

2026-07-22 06:08:03 +00:00

feat: add dark mode with theme toggle

CI / Deploy (pull_request) Has been skipped

Details

Docs Gate / docs-ok (pull_request) Has been cancelled

Details

CI / Docker Build (pull_request) Has been cancelled

Details

CI / Frontend (pull_request) Has been cancelled

Details

CI / Detect Changes (pull_request) Has been cancelled

Details

210afc1b4e

- Add [data-theme=dark] CSS variable overrides for all 60+ tokens
- Add sun/moon theme toggle button in sidebar footer
- Add flash-prevention script in index.html (reads localStorage/OS preference)
- Replace hardcoded hex colors in Registry.tsx and MonitoringBridge.tsx
- Persist theme preference to localStorage, default to OS prefers-color-scheme