Skip to content

feat(web): add light mode with three-way theme toggle - #25

Merged
pufit merged 26 commits into
ClickHouse:mainfrom
kschlarman:feat/light-mode
Apr 3, 2026
Merged

feat(web): add light mode with three-way theme toggle#25
pufit merged 26 commits into
ClickHouse:mainfrom
kschlarman:feat/light-mode

Conversation

@kschlarman

@kschlarman kschlarman commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds a light mode to the Nerve frontend with a three-way toggle (System / Light / Dark) in the NavRail
  • Introduces 13 semantic color tokens as CSS custom properties, registered with Tailwind v4 via @theme inline, replacing ~321 hardcoded hex values across 66 files
  • Dark theme is pixel-identical — all tokens resolve to the original hex values by default
  • Theme preference persists to localStorage with an inline <script> in index.html to prevent flash of wrong theme on load

Architecture

  • CSS layer: @theme inline tokens in index.css with :root dark defaults, [data-theme="light"] overrides, and @media (prefers-color-scheme: light) for system preference
  • Zustand store: themeStore.ts manages preference, sets data-theme attribute on <html>
  • Toggle: ThemeToggle.tsx in NavRail — cycles Sun/Moon/Monitor icons
  • highlight.js: Light mode overrides for code syntax highlighting (GitHub Light theme)

New files

  • web/src/stores/themeStore.ts
  • web/src/components/Layout/ThemeToggle.tsx

Test plan

  • Verify dark mode looks identical to current production (no visual regressions)
  • Click theme toggle in NavRail — cycles System → Light → Dark → System
  • Light mode: backgrounds are light gray/white, text is dark, borders visible
  • Code blocks have correct syntax highlighting in both themes
  • Refresh page — theme preference persists, no flash of wrong theme
  • Set to System mode — verify it follows OS light/dark preference
  • Check colored badges/pills are readable in both themes
  • npx tsc -b --noEmit passes
  • npx vite build passes

🤖 Generated with Claude Code

kschlarman and others added 26 commits April 1, 2026 16:36
@kschlarman @claude
docs: add light mode design spec and implementation plan
dc63725 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
feat(web): add CSS theme token system with dark/light palettes
a40eb7b 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
feat(web): add Zustand theme store with localStorage persistence
f30e94a 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
feat(web): add flash prevention script for theme loading
73db4fc 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
feat(web): add ThemeToggle component for NavRail
3da4318 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
feat(web): integrate ThemeToggle into NavRail, migrate NavRail colors
4013556 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate Layout and Auth components to theme tokens
8ddeafe 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman
refactor(web): migrate Chat core components to theme tokens
b52e175
@kschlarman
refactor(web): migrate Chat panel components to theme tokens
dc3bf25
@kschlarman @claude
refactor(web): migrate Chat tool block components to theme tokens
81c810a 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate Files components to theme tokens
fdded6f 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate Task components to theme tokens
5cc2d76 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate remaining components to theme tokens
e3d5935 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate high-density pages to theme tokens (Memu, Sour…
3fa04c0 
…ces, Diagnostics, Cron)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate mid-density pages to theme tokens
c29d0ed 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate remaining pages to theme tokens
bf6be68 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
refactor(web): migrate index.css styles and add highlight.js light ov…
0b9449c 
…errides

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): migrate remaining hardcoded colors missed in initial pass
d5fbe8a 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): fix low-contrast text in skill editor textarea in light mode
95ee5d7 
The skill editor textarea had a hardcoded text-[#d0d0d0] that was
missed in the migration sweep. Replaced with text-text-secondary.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): fix dark selection background in light mode sidebar/file tree
29e4b71 
bg-[#1f1f2f] was an indigo-tinted dark background for selected items
that rendered as near-black in light mode. Replaced with bg-[#6366f1]/10
(semi-transparent indigo) which works on both light and dark backgrounds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): fix low-contrast cron job name and button text in light mode
2b9c320 
- Job name used hardcoded text-[#eee] (near-white), replaced with text-text
- Run/Rotate buttons used text-text-dim (#999 in light mode, poor contrast),
  bumped to text-text-muted (#666, passes WCAG AA)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): fix dark hover backgrounds missed in light mode migration
abb99c1 
Several components had hardcoded dark hover/background colors (ClickHouse#111,
#0c0c10, #141420, #1a1a22, #252530) that rendered as near-black in
light mode. Replaced with semantic tokens (surface-hover, bg-sunken, etc).

Affected: BashToolBlock, SidePanel, MemuPage, QuestionBlock

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): improve badge/pill label contrast for light mode
ca4d8d3 
Shifted colored badges from dark-mode-only palette (text-COLOR-400 on
bg-COLOR-950/30) to universal mid-range palette (text-COLOR-600 on
bg-COLOR-500/15). The -600 text shades have good contrast on both light
and dark backgrounds, and -500/15 backgrounds create a visible tint
on any surface.

Affected: CronPage, SourcesPage, SkillDetailPage, DiagnosticsPage,
GitHubRenderer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): use recessed background for Files sidebar in light mode
687e4aa 
Changed from bg-surface (white) to bg-bg (page background) so the
sidebar blends with the page rather than standing out as bright white.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
fix(web): fix diff view colors for light mode
f7f408a 
- Line backgrounds: -950/25 → -500/15 (visible tint on both themes)
- Text: -300/90 → -600 (readable on both light and dark backgrounds)
- Gutters: -950/15 → -500/10, borders -900/30 → -500/20
- Hunk header: hardcoded dark indigo → semi-transparent #6366f1/10

Same fix applied to EditToolBlock inline diffs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kschlarman @claude
chore: remove brainstorming docs from PR
07401a7 
These are local planning artifacts, not intended for upstream.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
pufit
pufit approved these changes Apr 3, 2026
View reviewed changes

@pufit pufit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, appreciate the work!

@pufit
pufit merged commit 3e8bcfe into ClickHouse:main Apr 3, 2026
@alex-clickhouse alex-clickhouse mentioned this pull request Sep 29, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pufit pufit pufit approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@kschlarman @pufit