Manual theme switcher: light / dark / solarized / colorblind-safe #45

New issue

Closed

opened 2026-03-23 22:50:34 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-03-23 22:50:34 -07:00

Owner

Summary

Add a persistent manual theme switcher to the Vue SPA. The Streamlit (Classic) UI already delegates theming to the host browser/OS; this is Vue-only.

Proposed themes

Theme	Notes
Dark (default)	Current palette — keep as-is
Light	Inverted palette, same CSS variable structure
Solarized Dark / Light	Ethan Schoonover palette — popular with power users
Colorblind-safe	High-contrast, deuteranopia/protanopia-friendly

Implementation notes

Vue SPA already uses CSS custom properties (--color-bg, --color-text, --color-border, etc.) scoped via a central theme file — a theme class on <html> should cascade cleanly
Theme preference stored in user.yaml (alongside ui_preference) so it persists across sessions and devices
Colorblind-safe theme needs special attention to match score color coding on job cards (green/red/orange accents) and any chart/progress elements
Theme toggle: small control in the Vue SPA sidebar footer (near the ← Classic UI button) or in Settings
Hacker mode Easter egg (Konami) should override any active theme while active, then restore on deactivation

Accessibility note

Colorblind-safe palette is a first-class theme, not an afterthought — aligns with CircuitForge's ND/adaptive needs audience. Prefer tested palettes (e.g. Paul Tol, IBM Carbon accessible) over hand-rolled.

Labels

enhancement · vue-spa · accessibility

## Summary Add a persistent manual theme switcher to the Vue SPA. The Streamlit (Classic) UI already delegates theming to the host browser/OS; this is Vue-only. ## Proposed themes | Theme | Notes | |-------|-------| | **Dark** (default) | Current palette — keep as-is | | **Light** | Inverted palette, same CSS variable structure | | **Solarized Dark / Light** | Ethan Schoonover palette — popular with power users | | **Colorblind-safe** | High-contrast, deuteranopia/protanopia-friendly | ## Implementation notes - Vue SPA already uses CSS custom properties (`--color-bg`, `--color-text`, `--color-border`, etc.) scoped via a central theme file — a theme class on `<html>` should cascade cleanly - Theme preference stored in `user.yaml` (alongside `ui_preference`) so it persists across sessions and devices - Colorblind-safe theme needs special attention to match score color coding on job cards (green/red/orange accents) and any chart/progress elements - Theme toggle: small control in the Vue SPA sidebar footer (near the ← Classic UI button) or in Settings - Hacker mode Easter egg (Konami) should override any active theme while active, then restore on deactivation ## Accessibility note Colorblind-safe palette is a first-class theme, not an afterthought — aligns with CircuitForge's ND/adaptive needs audience. Prefer tested palettes (e.g. Paul Tol, IBM Carbon accessible) over hand-rolled. ## Labels `enhancement` · `vue-spa` · `accessibility`