fix: traffic light styling on light mode#6333
Conversation
WalkthroughRenderer informs main process when the active theme changes. ThemeProvider sends a 'renderer:theme-change' IPC message after applying the stored theme; the main process listens on that channel and sets Electron's nativeTheme.themeSource accordingly. Changes
Sequence DiagramsequenceDiagram
participant Renderer as Renderer Process
participant IPC as IPC Bridge
participant Main as Main Process
Renderer->>Renderer: ThemeProvider applies storedTheme
Renderer->>Renderer: Update root CSS classes
Renderer->>IPC: ipcRenderer.send("renderer:theme-change", theme)
IPC->>Main: Deliver IPC message
Main->>Main: ipcMain receives message
Main->>Main: nativeTheme.themeSource = theme
Note over Main: Native theme source updated
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/providers/Theme/index.js(1 hunks)packages/bruno-electron/src/ipc/preferences.js(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/providers/Theme/index.jspackages/bruno-electron/src/ipc/preferences.js
🧠 Learnings (1)
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component
Applied to files:
packages/bruno-app/src/providers/Theme/index.js
🧬 Code graph analysis (1)
packages/bruno-electron/src/ipc/preferences.js (1)
packages/bruno-app/src/providers/Theme/index.js (1)
theme(48-48)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Playwright E2E Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: Unit Tests
- GitHub Check: CLI Tests
- GitHub Check: SSL Tests - Linux
🔇 Additional comments (2)
packages/bruno-app/src/providers/Theme/index.js (1)
40-42: IPC theme sync looks good.The implementation correctly checks for
window.ipcRendereravailability and sends the theme value to the main process. This enables proper native theme synchronization.packages/bruno-electron/src/ipc/preferences.js (1)
1-1: Import addition looks correct.Adding
nativeThemeto the electron imports is appropriate for the theme synchronization feature.
| ipcMain.on('renderer:theme-change', (event, theme) => { | ||
| nativeTheme.themeSource = theme; | ||
| }); |
There was a problem hiding this comment.
Validate the incoming theme value.
The IPC handler directly assigns the received theme value to nativeTheme.themeSource without validation. This could cause issues if an invalid value is received.
Apply this diff to add validation:
ipcMain.on('renderer:theme-change', (event, theme) => {
- nativeTheme.themeSource = theme;
+ const validThemes = ['system', 'light', 'dark'];
+ if (validThemes.includes(theme)) {
+ nativeTheme.themeSource = theme;
+ }
});📝 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.
| ipcMain.on('renderer:theme-change', (event, theme) => { | |
| nativeTheme.themeSource = theme; | |
| }); | |
| ipcMain.on('renderer:theme-change', (event, theme) => { | |
| const validThemes = ['system', 'light', 'dark']; | |
| if (validThemes.includes(theme)) { | |
| nativeTheme.themeSource = theme; | |
| } | |
| }); |
🤖 Prompt for AI Agents
In packages/bruno-electron/src/ipc/preferences.js around lines 42 to 44, the IPC
handler assigns the incoming theme directly to nativeTheme.themeSource; validate
the incoming value first by checking it's a string and one of the allowed values
('system', 'light', 'dark'), then only set nativeTheme.themeSource when valid;
if invalid, either ignore the change and log a warning (or send an IPC reply to
the renderer indicating invalid input) or fall back to a safe default such as
'system'.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/bruno-app/src/providers/Theme/index.js (1)
20-26: Add cleanup for thematchMediachange listenerThe
addEventListener('change', …)on the media query never gets cleaned up, so ifThemeProvideris ever unmounted/remounted, you’ll accumulate listeners. Consider returning a cleanup function:- useEffect(() => { - window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => { + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-color-scheme: light)'); + const handleChange = (e) => { if (storedTheme !== 'system') return; setDisplayedTheme(e.matches ? 'light' : 'dark'); toggleHtml(); - }); - }, []); + }; + + mediaQuery.addEventListener('change', handleChange); + + return () => { + mediaQuery.removeEventListener('change', handleChange); + }; + }, []);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/providers/Theme/index.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/providers/Theme/index.js
🧠 Learnings (2)
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component
Applied to files:
packages/bruno-app/src/providers/Theme/index.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/providers/Theme/index.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
🔇 Additional comments (1)
packages/bruno-app/src/providers/Theme/index.js (1)
28-43: IPC theme notification + dependency array look goodTying the effect to
storedThemeand sending a guarded IPC message viawindow.ipcRendererafter updating the root classes is a clean way to keep the main process in sync with theme changes. No issues from a React/Electron integration standpoint here.
Description
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.