fix(frontend): replace hardcoded colors with theme-aware CSS variables - #323
Open
thrawn-sh wants to merge 1 commit into
Open
fix(frontend): replace hardcoded colors with theme-aware CSS variables#323thrawn-sh wants to merge 1 commit into
thrawn-sh wants to merge 1 commit into
Conversation
Owner
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (6)
📝 WalkthroughWalkthroughThis styling update replaces hard-coded colors across model selection, authentication, repository, and session interfaces with theme tokens. It also adds light-mode global background and loading-gradient rules. ChangesTheme token restyling
Estimated code review effort: 3 (Moderate) | ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/SessionDetail.tsx`:
- Line 465: Update the Header className in SessionDetail so the button styling
selector targets only the intended controls, rather than every descendant
button. Preserve the existing styling for those controls while excluding the
parent-session button and other header actions from the secondary background,
border, text, and hover rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 057f734c-eb64-4e71-83ea-54a35e845d78
📒 Files selected for processing (7)
frontend/src/components/model/ModelQuickSelect.tsxfrontend/src/components/repo/AddRepoDialog.tsxfrontend/src/index.cssfrontend/src/pages/AssistantRedirect.tsxfrontend/src/pages/Login.tsxfrontend/src/pages/RepoDetail.tsxfrontend/src/pages/SessionDetail.tsx
thrawn-sh
force-pushed
the
fix/theme-consistency
branch
2 times, most recently
from
July 27, 2026 05:15
8b952f1 to
375fa38
Compare
Replace hardcoded dark-mode colors (bg-[#141414], text-white, bg-zinc-950, bg-blue-600, etc.) with semantic Tailwind theme tokens (bg-card, text-foreground, bg-primary, etc.) across all affected components. This ensures the UI renders correctly in both light and dark mode. Components fixed: - AddRepoDialog: all hardcoded bg/text/border colors → theme variables - ModelQuickSelect: BottomSheet bg-zinc-950/text-white → bg-popover/text-foreground - SessionDetail: header button overrides → bg-secondary/text-secondary-foreground - RepoDetail: primary buttons bg-blue-600 → bg-primary - AssistantRedirect: primary buttons bg-blue-600 → bg-primary - Login: added missing bg-input class on inputs (consistent with Register/Setup) CSS fixes: - index.css: fix dead selector :root:not(.dark) html → html:not(.dark) - index.css: add light-mode variant for .shine-loading gradient animation Spotted during extensive weekend use of the UI — switching between light and dark theme revealed that several components were only styled for dark mode, appearing as dark "islands" on a light background. The inconsistencies were particularly noticeable in the AddRepoDialog, model selector bottom sheet, and session header buttons.
thrawn-sh
force-pushed
the
fix/theme-consistency
branch
from
July 28, 2026 19:25
375fa38 to
1145527
Compare
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
2 participants
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.
Replace hardcoded dark-mode colors (bg-[#141414], text-white, bg-zinc-950, bg-blue-600, etc.) with semantic Tailwind theme tokens (bg-card, text-foreground, bg-primary, etc.) across all affected components. This ensures the UI renders correctly in both light and dark mode.
Components fixed:
CSS fixes:
Spotted during extensive weekend use of the UI — switching between light and dark theme revealed that several components were only styled for dark mode, appearing as dark "islands" on a light background. The inconsistencies were particularly noticeable in the AddRepoDialog, model selector bottom sheet, and session header buttons.
Summary
Type of Change
Checklist
pnpm lintpasses locallypnpm typecheckpasses locallySummary by CodeRabbit
htmlbackground selector.