feat(themes): add themeable bgTitleBar token for the window title bar#1103
Conversation
The draggable title bar (App.tsx) rendered transparent and showed bgMain behind it, so themes had no way to color that top strip independently. Add an optional bgTitleBar color token: - New optional field on ThemeColors (falls back to bgMain when unset, so pre-existing saved/imported custom themes are unchanged). - Wire the title bar to bgTitleBar ?? bgMain. - Set bgTitleBar on all 20 built-in themes, each mirroring its own bgMain, so every existing theme looks pixel-identical. - Expose it as an editable field in the Custom Theme Builder, with a title-bar strip added to the live preview. - Add bgTitleBar to the REQUIRED_COLORS theme test.
📝 WalkthroughWalkthroughAdds a new optional ChangesbgTitleBar Theme Color
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
Greptile SummaryThis PR adds a
Confidence Score: 3/5Safe to merge for new installs and for users who never import custom theme files; breaks re-import of any theme JSON exported before this change. The title-bar wiring and built-in theme updates are solid. The one flaw is that src/renderer/components/CustomThemeBuilder.tsx — specifically the import validation logic at lines 382–390 where COLOR_CONFIG drives required-key enforcement. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[App renders title bar div] --> B{theme.colors.bgTitleBar set?}
B -- yes --> C[backgroundColor = bgTitleBar]
B -- no / undefined --> D[backgroundColor = bgMain fallback]
E[User imports theme JSON] --> F{bgTitleBar key present in file?}
F -- yes --> G[Import succeeds]
F -- no / old file --> H[❌ Validation error: missing color keys]
I[CustomThemeBuilder display] --> J{customThemeColors.bgTitleBar set?}
J -- yes --> K[Show actual bgTitleBar value]
J -- no --> L[Show bgMain value as placeholder]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[App renders title bar div] --> B{theme.colors.bgTitleBar set?}
B -- yes --> C[backgroundColor = bgTitleBar]
B -- no / undefined --> D[backgroundColor = bgMain fallback]
E[User imports theme JSON] --> F{bgTitleBar key present in file?}
F -- yes --> G[Import succeeds]
F -- no / old file --> H[❌ Validation error: missing color keys]
I[CustomThemeBuilder display] --> J{customThemeColors.bgTitleBar set?}
J -- yes --> K[Show actual bgTitleBar value]
J -- no --> L[Show bgMain value as placeholder]
|
![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 `@src/renderer/components/CustomThemeBuilder.tsx`:
- Line 40: The addition of bgTitleBar to COLOR_CONFIG makes it a required key
during theme import validation, which breaks compatibility with older exported
theme files that lack this field. Modify the handleImport function to treat
bgTitleBar as optional during validation (do not enforce it as a required key
derived from COLOR_CONFIG), and add logic to synthesize bgTitleBar from bgMain
when the imported theme object does not include a bgTitleBar value, ensuring
backward compatibility with pre-bgTitleBar theme files.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 836f2d7c-d458-420d-a55c-f4b6bd2fbdc3
📒 Files selected for processing (5)
src/__tests__/renderer/constants/themes.test.tssrc/renderer/App.tsxsrc/renderer/components/CustomThemeBuilder.tsxsrc/shared/theme-types.tssrc/shared/themes.ts
| { key: 'bgMain', label: 'Main Background', description: 'Primary content area' }, | ||
| { key: 'bgSidebar', label: 'Sidebar Background', description: 'Left & right panels' }, | ||
| { key: 'bgActivity', label: 'Activity Background', description: 'Hover, active states' }, | ||
| { key: 'bgTitleBar', label: 'Title Bar Background', description: 'Top draggable window strip' }, |
There was a problem hiding this comment.
Preserve import compatibility for pre-bgTitleBar theme files.
Adding bgTitleBar to COLOR_CONFIG also makes it required by handleImport (because required keys are derived from COLOR_CONFIG). That rejects older exported custom themes lacking this optional token. Keep bgTitleBar optional in import validation and synthesize it from bgMain when absent.
Suggested fix
- // Validate all required color keys exist
- const requiredKeys = COLOR_CONFIG.map((c) => c.key);
+ // Validate required keys (keep bgTitleBar backward-compatible/optional)
+ const requiredKeys = COLOR_CONFIG
+ .map((c) => c.key)
+ .filter((k) => k !== 'bgTitleBar');
const hasAllKeys = requiredKeys.every((key) => key in data.colors);
@@
- // Validate all color values are valid CSS colors
- const invalidColors = requiredKeys.filter((key) => !isValidColor(data.colors[key]));
+ // Validate all required color values; validate bgTitleBar only when provided
+ const keysToValidate: (keyof ThemeColors)[] =
+ 'bgTitleBar' in data.colors
+ ? [...requiredKeys, 'bgTitleBar']
+ : requiredKeys;
+ const invalidColors = keysToValidate.filter((key) => !isValidColor(data.colors[key]));
@@
- // All validations passed - apply the theme
- setCustomThemeColors(data.colors);
+ // All validations passed - apply normalized theme
+ const normalizedColors: ThemeColors = {
+ ...data.colors,
+ bgTitleBar: data.colors.bgTitleBar ?? data.colors.bgMain,
+ };
+ setCustomThemeColors(normalizedColors);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { key: 'bgTitleBar', label: 'Title Bar Background', description: 'Top draggable window strip' }, | |
| // Validate required keys (keep bgTitleBar backward-compatible/optional) | |
| const requiredKeys = COLOR_CONFIG | |
| .map((c) => c.key) | |
| .filter((k) => k !== 'bgTitleBar'); | |
| const hasAllKeys = requiredKeys.every((key) => key in data.colors); | |
| // Validate all required color values; validate bgTitleBar only when provided | |
| const keysToValidate: (keyof ThemeColors)[] = | |
| 'bgTitleBar' in data.colors | |
| ? [...requiredKeys, 'bgTitleBar'] | |
| : requiredKeys; | |
| const invalidColors = keysToValidate.filter((key) => !isValidColor(data.colors[key])); | |
| // All validations passed - apply normalized theme | |
| const normalizedColors: ThemeColors = { | |
| ...data.colors, | |
| bgTitleBar: data.colors.bgTitleBar ?? data.colors.bgMain, | |
| }; | |
| setCustomThemeColors(normalizedColors); |
🤖 Prompt for 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.
In `@src/renderer/components/CustomThemeBuilder.tsx` at line 40, The addition of
bgTitleBar to COLOR_CONFIG makes it a required key during theme import
validation, which breaks compatibility with older exported theme files that lack
this field. Modify the handleImport function to treat bgTitleBar as optional
during validation (do not enforce it as a required key derived from
COLOR_CONFIG), and add logic to synthesize bgTitleBar from bgMain when the
imported theme object does not include a bgTitleBar value, ensuring backward
compatibility with pre-bgTitleBar theme files.
1 participant
Summary
RC-targeted counterpart of #1102 (single commit cherry-picked onto
rc, so this PR contains only the theme change and none of the unrelated commits that are onmainbut not yet onrc).The draggable window title bar (the top strip with the traffic-light buttons and the centered agent title) rendered transparent and showed
bgMainbehind it. Themes had no way to color that strip independently, so on light themes it always read as the lightest color in the palette. This adds a themeablebgTitleBartoken.What changed
src/shared/theme-types.ts- new optionalbgTitleBar?field onThemeColors. Optional (like the ANSI keys) so pre-existing saved/imported custom themes degrade gracefully.src/shared/themes.ts- setbgTitleBaron all 20 built-in themes, each mirroring its ownbgMain, so every existing theme looks pixel-identical after this change.src/renderer/App.tsx- wire the title bar background tobgTitleBar ?? bgMain.src/renderer/components/CustomThemeBuilder.tsx- new editable "Title Bar Background" field + a title-bar strip in the live preview.src/__tests__/renderer/constants/themes.test.ts- addbgTitleBartoREQUIRED_COLORS.Backward compatibility
bgTitleBardefaults tobgMaineverywhere it is unset. No theme changes appearance unless itsbgTitleBaris deliberately set to something different.Validation
Notes
App.tsxwiring.main: feat(themes): add themeable bgTitleBar token for the window title bar #1102.Summary by CodeRabbit