Skip to content

Fix brand color tokens keeping light values in dark mode - #65

Merged
calvintvu merged 1 commit into
mainfrom
cvu/dark-mode
Aug 12, 2026
Merged

Fix brand color tokens keeping light values in dark mode#65
calvintvu merged 1 commit into
mainfrom
cvu/dark-mode

Conversation

@calvintvu

@calvintvu calvintvu commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Context

In dark mode, the cards on the subagent rail still rendered in the light palette. The cause is in src/index.css. The 21 coSlash brand tokens were literal hex values inside a plain @theme block. A literal in @theme has nothing for .dark to override, so every brand token kept its light value on a dark page. The subagent card was the most visible case, because it is the largest painted surface and it repeats once per subagent.

Changes

  • All 21 brand tokens now follow the theme. The @theme block became @theme inline aliases that point at :root variables, plus a .dark override set. This is the same indirection the shadcn neutrals already use in this file. No component reads these through anything but a utility class, so no consumer changed.
  • The subagent card lifts off the page instead of mirroring light mode. In light mode the card sits 1.05 below a white page. Below #0a0a0a is mud, so on dark it sits 1.06 above the page at #0c1315.
  • The card tint stays a whisper on purpose. DetailedSubagentRow paints the subagent-bg badge directly onto the card, and a saturated card swallows that badge. The rail carries the subagent identity instead, at #2a94a8.
  • The sheet scrim gets a dark value. It was a hardcoded light navy rgba(23, 39, 66, 0.28), which does nothing over a near-black page. On dark it is now rgba(0, 0, 0, 0.6).
  • The subagent digest row in SessionInspector no longer uses border-subagent-rail as a full box border. That token becomes strong teal on dark, which would ring the row in loud teal. The row now uses the default card border, which matches SubagentCard.
  • Light mode is unchanged. Every :root value is the same hex as before.

Test

  • npm run lint — passed. Two warnings remain in SessionSortDropdownMenu.tsx, both present before this branch.
  • npx tsc --noEmit — passed
  • npm test — passed, 10 tests
  • npx vite build — passed. In the built CSS, .bg-subagent-card now emits background-color:var(--subagent-card) instead of a baked hex, :root keeps #f2fbfc, and .dark carries #0c1315.

Screenshots

Screenshot 2026-08-11 at 20 09 36

@calvintvu calvintvu added the bug Something isn't working label Aug 12, 2026
@calvintvu
calvintvu merged commit ede42ce into main Aug 12, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants