feat(web): add theme system with light/dark/night modes and compact u… - #432
feat(web): add theme system with light/dark/night modes and compact u…#432Emmanuek5 wants to merge 1 commit into
Conversation
…ser messages - Add theme selector in sidebar with 4 options: light, dark, night, system - Extend useTheme hook to support new theme types - Add CSS variables for dark (balanced) and night (darkest) themes - Make user message cards more compact: - Reduced padding (px-3 py-2) - Smaller text (13px) - Actions appear below card on hover - Update CHANGELOG.md
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d09f3ee500
ℹ️ 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".
| {THEME_OPTIONS.map((option) => ( | ||
| <MenuRadioItem key={option.value} value={option.value}> | ||
| {option.label} |
There was a problem hiding this comment.
Adding night to the sidebar selector makes that value reachable, but the settings route still defines its own THEME_OPTIONS with only system/light/dark (apps/web/src/routes/_chat.settings.tsx), so users who pick Night in the sidebar see no selected radio in Settings and cannot manage that choice there. This inconsistency was introduced by adding a second source of truth for theme options and will confuse users unless both surfaces share the same option list.
Useful? React with 👍 / 👎.
| </p> | ||
| </div> | ||
| </div> | ||
| <div className="mt-1 flex items-center gap-1.5 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100"> |
There was a problem hiding this comment.
The user-message action row is now hidden with opacity-0 and only revealed via group-hover/focus-within, which breaks discoverability and access on touch/non-hover environments; in particular, rows without focusable actions (for example image-only messages without revert) have no way to trigger focus-within, so their timestamp remains permanently hidden unless hover exists. This regresses core message controls and metadata visibility on mobile.
Useful? React with 👍 / 👎.
|
Light/dark toggle too prominent. Empty space under messages is just as bad as the extra space for copy buttons Not really interested in ui prs rn sorry |
2 participants
Summary
Adds a three-tier theme system and improves the user message UI for a cleaner, more compact look.
Changes
Theme System
Light– bright modeDark– balanced dark (neutral-900 based, good everyday contrast)Night– deepest dark (neutral-950 based, minimal light)System– follows OS preferencelocalStorageUser Messages
Files Changed
THEME_OPTIONSand Theme type@variant dark(balanced) and@variant night(darkest) CSS variable blockss/Codes/t3code/apps/web/src/components/Sidebar.tsx:0:0-0:0) | Added theme selector menu in sidebar header for both desktop and web layouts |
| apps/web/src/components/ChatView.tsx | Compact user message card styling; actions moved below card on hover |
| CHANGELOG.md | Created and documented all changes |
Testing
bun typecheckpassesNote
Add a theme selector to the web Sidebar header and apply
useTheme.applyThemeto support light, dark, night, and system modes with compact user message styling inChatViewIntroduce a theme menu with
THEME_OPTIONSandThemeIcon, updateuseThemeto toggledarkandnightclasses, and add CSS variants for night mode; make user messages inChatViewrender in a compact layout with actions and timestamp below the bubble.📍Where to Start
Start with the theme logic in
useTheme, focusing onapplyThemeanduseThemein apps/web/src/hooks/useTheme.ts.Macroscope summarized d09f3ee.