Dark Mode Theme System with System Preference Detection

[JamesEjembi]

Problem Statement

Users need light and dark mode options for comfortable viewing during extended monitoring sessions. Implement a theme system with CSS custom properties, automatic system preference detection (prefers-color-scheme), manual toggle, and persistent preference stored in localStorage.

Technical Bounds

• Theme tokens: 60+ CSS custom properties (colors, spacing, shadows, border-radius).
• System preference: read prefers-color-scheme on mount; update on change via matchMedia listener.
• Toggle: navbar button cycling system -> light -> dark.
• Persistence: localStorage.setItem('theme', 'light'|'dark'|'system').
• Transition: smooth color transitions (transition: background-color 0.3s, color 0.3s).
• Charts: Lightweight Charts theme sync with current mode.

Steps

1. Define CSS custom properties in :root (light) and [data-theme="dark"] selectors.
2. Implement ThemeProvider context with useTheme() returning (theme, setTheme, resolvedTheme).
3. On mount, read localStorage; fallback to prefers-color-scheme; apply data-theme attribute.
4. Build ThemeToggle button with sun/moon/monitor icons.
5. Migrate all component styles to use var(--color-*) tokens.
6. Sync chart theme on mode change via chart.applyOptions().

[Thosine-01]

Hi! I’d love to take charge of building your unified, flicker-free light and dark mode Theme Architecture. Introducing dark modes into analytics platforms requires far more than just swapping primary backgrounds—it calls for structured color token systems that maintain strict contrast balances and require immediate runtime syncing to underlying canvas tracking charts. I have extensive experience building scalable design systems, working with CSS custom properties, and optimizing charting components for seamless theme reactivity.

I will define your matrix of 60+ CSS variables under explicit :root and [data-theme="dark"] rules, shifting all existing UI component variables over to structured var(--color-*) custom properties. I'll construct a highly performant ThemeProvider engine that accurately parses manual overrides out of localStorage and falls back gracefully onto system preferences via native matchMedia event tracking listeners. I will implement the multi-state theme switch toggle inside the navbar and coordinate deep theme bindings to your Lightweight Charts instances using chart.applyOptions() to ensure every grid line, background canvas, and axis text layer updates the microsecond a user flips the switch.

ETA: less than 12hours