Conversation
Add a three-way theme selector (Dark, Light, System) to Settings with dark mode as the default. Introduces ~40 CSS custom properties for semantic color tokens with .light class overrides, migrates all 50+ components from hardcoded dark-theme colors to CSS variables, and persists the preference via IPC to the settings store. - Add `theme` field to KuduSettings type and both settings stores - Add ThemeSelector segmented control to Settings > General - Apply dark/light class on <html> with system preference listener - Define comprehensive CSS variable system (surfaces, text, borders, glass effects, gauge tracks, grid lines, scrollbars) - Migrate all hardcoded rgba/hex colors across components and pages - Add `theme` to IPC validation allowlist with value checking - Fix SVG gauge/ring tracks and chart grid lines for light mode - Update Sonner toast theming to follow active theme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5ff2e5cbc8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Add .light .text-zinc-100 override (used in 8 places for primary labels) - Change .light .bg-white/5 from hover-only to persistent so non-hover backgrounds get the dark tint in light mode - Add .light .bg-white/10 override for CveScannerPage active tab state Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
.lightclass overrides, replacing all hardcoded dark-theme colors across 50+ componentsDetails
Core infrastructure:
theme: 'dark' | 'light' | 'system'added toKuduSettingstype and both settings storesApp.tsxappliesdark/lightclass on<html>withmatchMedialistener for system preferenceglobals.cssdefines complete variable system: surfaces, text, borders, glass effects, gauge tracks, grid lines, scrollbarsthemekey + value validationComponent migration (52 files):
rgba(255,255,255,...)→ semantic CSS variables (--bg-subtle,--border-default, etc.)#16161a,#0a0a10,#9e9ea6, etc.) → appropriate CSS variablesvar(--gauge-track)/var(--grid-line)Test plan
🤖 Generated with Claude Code