feat(ui): theme the Workspaces surface + terminal (light/dark)#356
Merged
Conversation
In light mode the whole Workspaces / chat-session surface stayed dark — a black panel stacked next to the cream shell — because it ran on its own local palette and a dark xterm theme. This was deferred as ANG-110; doing the bulk of it now. - workspaces.css: alias the `.workspaces-root` local palette (--bg / --panel / --sidebar / --border / --fg / --fg-dim / --accent / --danger) to the global --color-* tokens, and drop the pinned `color-scheme: dark`. One block makes the entire ~1400-line sheet follow light / dark. Replace the 10 hardcoded white-alpha elevation overlays with --color-overlay / -strong, and the two hardcoded dark header gradients (.terminal-header, .panel-header — the "still black up top" bar) with a token gradient. - Terminal: add a light xterm ITheme (theme.ts) and pick it by the active theme via a new useEffectiveTheme() hook (auto resolves through the OS). A ref + a small effect re-skin the LIVE terminal on a theme flip without recreating it (scrollback / reattach untouched). Still deferred to ANG-110: the ~20 semantic chips (agent badges, status pills) keep dark-tuned colors — they don't break layout but want a light-legible pass; tracked there. Verified: vite build drops all #161b22/#11151a dark header gradients; .terminal-header + .workspaces-root now resolve to the global tokens.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
Follow-up to the light/dark theme (#355): the Workspaces / chat-session surface stayed dark in light mode — a black panel beside the cream shell — because it ran on its own local palette + a dark xterm theme. This themes it.
workspaces.css: alias the.workspaces-rootlocal palette (--bg/--panel/--sidebar/--border/--fg/--fg-dim/--accent/--danger) to the global--color-*tokens and drop the pinnedcolor-scheme: dark— one block makes the whole ~1400-line sheet follow the theme. Replace the 10 hardcoded white-alpha elevation overlays with--color-overlay/-strong, and the two hardcoded dark header gradients (.terminal-header,.panel-header— the "still black up top" bar) with a token gradient.ITheme(theme.ts) selected by the active theme via a newuseEffectiveTheme()hook (autoresolves through the OS). A ref + small effect re-skin the live terminal on a theme flip without recreating it (scrollback / reattach untouched).Still deferred — ANG-110
The ~20 semantic chips (agent badges, status pills) keep dark-tuned colors. They don't break layout but want a light-legible pass; tracked in ANG-110.
Test plan
cd ui && npx tsc -bcleanvite buildclean — built CSS has zero#161b22/#11151adark gradients;.terminal-header+.workspaces-rootresolve to global tokensBoundary touch
None — UI only.
🤖 Generated with Claude Code