Skip to content

dashboard: light/dark mode toggle (warm parchment + deep amber)#1535

Open
AlexCheema wants to merge 2 commits intomainfrom
feat/dashboard-light-mode-v2
Open

dashboard: light/dark mode toggle (warm parchment + deep amber)#1535
AlexCheema wants to merge 2 commits intomainfrom
feat/dashboard-light-mode-v2

Conversation

@AlexCheema
Copy link
Contributor

Summary

Adds a light/dark mode toggle to the EXO dashboard with an original "Mission Control, Dawn Shift" aesthetic.

Light mode palette — warm parchment + deep amber/brass:

  • Background: oklch(0.97 0.015 80) — warm near-white, like aged paper
  • Cards: oklch(0.92 0.012 80) — aged cream
  • Borders: oklch(0.83 0.009 78) — warm taupe
  • Accent: oklch(0.50 0.14 65) — deep amber/brass (readable on light)
  • Foreground: oklch(0.13 0.015 75) — warm near-black

Dark mode unchanged — same command-center blacks and bright yellow.

Implementation

  • theme.svelte.ts — 28-line Svelte 5 rune store, no mode-watcher dependency
  • FOUC prevention: html starts as class="dark", inline script reads localStorage and switches before first paint
  • html.light CSS class approach (not :not(.dark)) for explicit, clean overrides
  • Sun/moon icon toggle in the HeaderNav right section
  • Persists to localStorage under key exo-theme

Files changed

  • dashboard/src/lib/stores/theme.svelte.ts (new)
  • dashboard/src/app.html
  • dashboard/src/routes/+layout.svelte
  • dashboard/src/lib/components/HeaderNav.svelte
  • dashboard/src/app.css

Test plan

  • Toggle button switches between sun (dark mode) and moon (light mode) icons
  • All major pages (topology, chat, downloads) render correctly in light mode
  • Theme persists across page reloads
  • No flash of wrong theme on load (FOUC prevention working)
  • Dark mode visually unchanged

🤖 Generated with Claude Code

@AlexCheema
Copy link
Contributor Author

Screenshots

Dark mode — command center aesthetic (unchanged):
Dark mode

Light mode — "Mission Control, Dawn Shift" (warm parchment + deep amber):
Light mode

Toggle is in the top-right nav (sun icon = currently dark → switch to light; moon icon = currently light → switch to dark). Theme persists via localStorage.

AlexCheema and others added 2 commits February 20, 2026 08:50
Adds a theme system to the EXO dashboard with a "Mission Control, Dawn
Shift" light mode — warm parchment backgrounds (oklch(0.97 0.015 80))
and deep amber/brass accents (oklch(0.50 0.14 65)) that feel premium
rather than cold.

Changes:
- dashboard/src/lib/stores/theme.svelte.ts: new Svelte 5 rune store,
  persists choice to localStorage under 'exo-theme'
- dashboard/src/app.html: FOUC prevention — html starts as class="dark",
  inline script reads localStorage and switches to class="light" before
  first paint
- dashboard/src/routes/+layout.svelte: calls theme.init() on mount to
  sync rune state with the DOM class
- dashboard/src/lib/components/HeaderNav.svelte: sun/moon toggle button
  in the right nav area
- dashboard/src/app.css: full html.light palette + utility overrides
  (scrollbar, logo filter, graph links, scanlines, etc.)

No new npm dependencies — avoids mode-watcher entirely.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…logyGraph

Port v1's component-level theme color mappings into v2's architecture:

- ModelCard: import theme store, add derived `tc` color object with
  light/dark variants for SVG strokes, fills, labels, and scanlines
- TopologyGraph: import theme store, add derived `themeColors` object
  with 20+ D3 color properties (device cases, screens, wires, labels,
  GPU chips, shadows, highlights); re-render graph on theme change

All hardcoded dark-mode-only colors (#FFD700, #4B5563, #0a0a0a, etc.)
replaced with theme-reactive values using v2's warm parchment palette.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@AlexCheema AlexCheema force-pushed the feat/dashboard-light-mode-v2 branch from 19a21e9 to ab427f1 Compare February 20, 2026 22:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant