feat(ui): light / dark / auto theme — Daybreak + Midnight + toggle#355
Merged
Conversation
…toggle The shell was dark-only (the #353 Linear palette). Add a real adaptive color mode so the all-black structure isn't the only option. Two palettes, one identity — alice-blue (her dress, from the character card) is the brand accent in BOTH modes: - Daybreak (light): cream paper + engraved-navy ink + alice-blue + gold. - Midnight (dark): TradingView-ward trading terminal — charcoal canvas, layered panels, brightened alice-blue, teal up / coral down (the #353 contributor's teal is reused as the up/positive color). How it works: - index.css `@theme` holds Daybreak (light) as the DEFAULT; a `:root[data-theme="dark"]` block + a `@media (prefers-color-scheme:dark)` block flip the same `--color-*` token names, so every bg-bg / text-accent / border-border utility follows the active theme with zero component changes. `auto` follows the OS. - theme store (ui/src/theme, mirrors the locale store): light|dark|auto, persisted; side-effect module applies `<html data-theme>`. An inline script in index.html mirrors the persisted value pre-paint (no flash). - ThemeToggle in the ActivityBar footer cycles auto → light → dark. De-hardcoded the chrome that assumed a dark bg: ActivityBar / TabStrip hover + active overlays and the ChatLanding backdrop now use two theme-aware overlay tokens (--color-overlay / -strong); the avatar / empty-editor / form-focus accent glows now use --color-accent-dim instead of stale GitHub-blue rgba literals. Deferred (ANG-110): the Workspaces surface keeps its own local dark palette (its ~40 semantic chips would wash out illegibly on cream without a dedicated pass), and a few data-viz colors (chart, react-flow, session status). A dark terminal-ish surface in a light app is acceptable interim. Living color card kept as a dev artifact: ui/design/theme-study.html. Test plan: - cd ui && npx tsc -b clean; vite build clean (overlay utilities + data-theme/prefers-color-scheme blocks emitted) - ui vitest project green (42) - Verified live (demo): light applies cream/navy/alice-blue, dark applies the TradingView set, toggle cycles auto→light→dark and persists 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The TradingView-ward dark (#131722 navy-charcoal panels) read as "too blue" once the full shell — activity rail + sidebar + tabs — was on screen: a large navy-tinted surface is fatiguing. Revert the dark backgrounds / panels / border / text to the #353 neutral-black palette (#0b0c0e / #0e0f12 / #1a1b21 / #24262c / #dfe1e6 / #8f929b), which stays calm at shell scale. Alice-blue survives ONLY as small brand highlights — the accent (active tab / nav indicator / buttons) and the user's own message bubble — so the large-area blue tint is gone while the brand stays consistent with Daybreak. Green/red/purple semantics also revert to the #353 values. Daybreak (light) is unchanged. Color card (ui/design/theme-study.html) synced to match. Verified: vite build emits --color-bg:#0b0c0e under [data-theme=dark], --color-accent stays #3b82f6.
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
index.css@theme= Daybreak default;:root[data-theme="dark"]+@media (prefers-color-scheme:dark)flip the same--color-*tokens → every utility follows, zero component churn.autofollows the OS.ui/src/theme, persisted) applies<html data-theme>; an inline script inindex.htmlmirrors it pre-paint (no flash).ThemeTogglein the ActivityBar footer cycles auto → light → dark.--color-accent-dim(were stale GitHub-blue literals).ui/design/theme-study.html(the source of truth for both palettes).Deferred — ANG-110
The Workspaces surface keeps its own local dark palette (its ~40 semantic chips — agent badges, status pills, terminal traffic-lights — would wash out illegibly on cream without a dedicated pass), plus a few data-viz colors (chart, react-flow, session status). A dark terminal-ish surface in a light app is acceptable interim (VS Code does it). Tracked: ANG-110.
Test plan
cd ui && npx tsc -bcleanvite buildclean — overlay utilities +data-theme/prefers-color-schemeblocks emitted in built CSSvitest --project uigreen (42)<body>+ tokens; dark → full TradingView set; toggle cycles auto→light→dark and persists to localStorageBoundary touch
None — UI only. No trading / auth / broker credentials / migrations.
🤖 Generated with Claude Code