feat(ui): add light theme#6570
Conversation
|
Claude finished @gustavosbarreto's task in 10m 57s —— View job Code Review CompleteReviewed 9 files across code quality, security, testing, TypeScript/React patterns, and architecture — 1 inline issue posted (medium severity). The theming approach is clean: CSS variable indirection through Tailwind tokens, a The one issue is a missing To request another review round, comment |
Drive the design-system semantic tokens (background, surface, card, border, text, hover overlays) through CSS variables so the whole UI can switch between dark (default) and light. Light values live under `html.light`; a Zustand store toggles the class and persists the choice to localStorage, applied before first paint to avoid a flash. A sun/moon entry in the user account menu flips the theme. The app chrome stays dark in light mode: the top bar is pinned to the dark token set via a `.theme-dark` utility that re-declares the variables, while the sidebar follows the theme. The page header gains a soft drop shadow in light so it reads as a raised sheet. Known rough edges (follow-up): accent colors and ~99 text-white/bg-white spots were calibrated for the dark background and look washed on light.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
gustavosbarreto
force-pushed
the
feature/light-theme
branch
from
8193b8f to
eb03242
Compare
|
/review |
|
Claude finished @gustavosbarreto's task in 5m 10s —— View job Code Review CompleteReviewed 10 files across code quality, security, testing, TypeScript/React patterns, and architecture — no new issues found. The code looks good as-is. |
2 participants
The console UI was dark only. This adds a light theme and a way to switch between the two.
How it works
The design-system semantic tokens (
background,surface,card,border,text-*, hover overlays) now resolve through CSS variables instead of literal colors. Dark values live in:root(the default), light values underhtml.light. Every component that already usesbg-background/text-text-primary/ etc. picks up the right value with no change.A small Zustand store (
themeStore) toggles thelightclass on<html>and persists the choice to localStorage. It applies the saved theme as the module loads, before first paint, so there is no flash on reload. The switch is a sun/moon entry inside the user account menu.Chrome stays dark
The top bar is pinned to the dark token set via a
.theme-darkutility that re-declares the variables locally, while the sidebar follows the active theme. In light mode the page header gains a soft drop shadow so it reads as a raised sheet against the lighter canvas.Known rough edges
These are calibrated for the dark background and look washed on light. Left as follow-ups so the foundation can land first:
text-white/bg-whitespots can end up white-on-light.