feat: Theme system with light/dark/night modes + compact user messages - #430
feat: Theme system with light/dark/night modes + compact user messages#430Emmanuek5 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 |
|
You need screenshots on PRs that make UI changes, cmon man |
![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".
| export const THEME_OPTIONS = [ | ||
| { value: "light", label: "Light", description: "Light mode" }, | ||
| { value: "dark", label: "Dark", description: "Balanced dark mode" }, | ||
| { value: "night", label: "Night", description: "Darkest mode" }, |
There was a problem hiding this comment.
This change introduces a persisted night theme choice, but the settings UI still hardcodes only system, light, and dark (apps/web/src/routes/_chat.settings.tsx lines 25-41), so once a user selects Night from the new sidebar picker, no option is shown as selected and the page reports the active theme as dark via resolvedTheme. That leaves the appearance state inconsistent across surfaces and can lead users to unintentionally reset their preference; the settings page should be driven by the same theme option source.
Useful? React with 👍 / 👎.
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 blocksTesting
bun typecheckpassesNote
Add theme selector with light/dark/night/system options in
Sidebarand make user message bubbles compact inChatViewIntroduce a
nighttheme variant and applydark/nightclasses viauseTheme, add a sidebar theme menu with icons, and update user message bubble layout and actions below the bubble. Key files: apps/web/src/hooks/useTheme.ts, apps/web/src/components/Sidebar.tsx, apps/web/src/components/ChatView.tsx, apps/web/src/index.css.📍Where to Start
Start with the
useThemehook andapplyThemelogic in apps/web/src/hooks/useTheme.ts to see howdarkandnightclasses are resolved and applied, then review the theme selector integration in apps/web/src/components/Sidebar.tsx.Macroscope summarized d09f3ee.