Feature/gruvbox theme (dark + light) #6711
Conversation
FraCata00
requested review from
bijin-bruno,
helloanoop,
lohit-bruno and
naman-bruno
as code owners
WalkthroughAdds full Gruvbox Dark and Light theme modules (exporting Changes
Sequence Diagram(s)(omitted — theme additions do not introduce multi-component control flow requiring sequence visualization) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (1)**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (CODING_STANDARDS.md)
Files:
🧠 Learnings (3)📚 Learning: 2025-12-17T21:41:24.730ZApplied to files:
📚 Learning: 2025-12-05T20:31:33.005ZApplied to files:
📚 Learning: 2025-12-05T20:31:33.005ZApplied to files:
🧬 Code graph analysis (1)packages/bruno-app/src/themes/dark/gruvbox.js (1)
🔇 Additional comments (11)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/bruno-app/src/themes/dark/gruvbox.js (1)
3-3: Minor: Non-English comment.The comment "ufficiale" is Italian. For consistency with the rest of the codebase, consider using English: "official".
Suggested fix
-// Gruvbox Dark palette ufficiale +// Official Gruvbox Dark palettepackages/bruno-app/src/themes/light/gruvbox.js (1)
3-3: Minor: Non-English comment.Same as the dark theme file—consider using English for consistency.
Suggested fix
-// Gruvbox Light palette ufficiale +// Official Gruvbox Light palette
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.jspackages/bruno-app/src/themes/light/gruvbox.js
🧰 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/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.jspackages/bruno-app/src/themes/light/gruvbox.js
🧠 Learnings (2)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
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/themes/dark/gruvbox.jspackages/bruno-app/src/themes/light/gruvbox.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.jspackages/bruno-app/src/themes/light/gruvbox.js
🔇 Additional comments (9)
packages/bruno-app/src/themes/dark/gruvbox.js (3)
1-2: LGTM on polished imports.Correct usage of
rgbaandlightenfor color derivation.
4-91: Well-structured palette definition.The palette cleanly separates concerns (primary, hues, system, background, text, overlay, border, utility) and appropriately extends with
intentandsyntaxafter initial definition. Color values align with the official Gruvbox palette.
93-687: Comprehensive theme object with consistent token coverage.The theme correctly maps palette values to all required UI component tokens (status, input, sidebar, dropdown, modal, buttons, tabs, codemirror, grpc, etc.). The structure mirrors other existing themes, ensuring compatibility.
packages/bruno-app/src/themes/light/gruvbox.js (3)
1-2: Appropriate polished imports for light theme.Using
darkeninstead oflightenis the correct approach for hover states on a light background.
4-91: Light palette correctly adapted.The light variant properly uses the Gruvbox light palette values (e.g.,
#fbf1c7for bg0, darker hue variants for text contrast). Theintentandsyntaxmappings use appropriate darker shades for readability on light backgrounds.
93-687: Theme object mirrors dark variant with appropriate light adjustments.Key differences are correctly applied:
mode: 'light'(line 94)- Lower alpha values for status backgrounds (0.1 vs 0.15)
- Lighter shadow opacity values
input.bgusesMANTLEinstead of transparentImplementation is consistent and complete.
packages/bruno-app/src/themes/index.js (3)
13-14: Imports correctly placed.Theme imports follow the existing pattern. Minor note: the import order places
gruvboxLightThemebetween dark imports andvscodeDark, which slightly breaks the dark/light grouping pattern. Not a functional issue.
28-29: Themes correctly registered.Keys follow the existing naming convention (
gruvbox-dark,gruvbox-light).
87-96: Registry metadata complete and correct.Both entries include proper
id,name, andmodeproperties, matching the established pattern for other themes.
|
Thanks @FraCata00, I approve of this, will wait on the other members to check a few things and we should be good to go. Mostly need to confirm if we plan custom themes anytime soon, if not then we will merge this in as a standard offering, thanks for this! |
|
I think this would need some work. Just checked out GruvBox on VSCode. It has 3 variants soft, medium and hard for both Dark and Light Themes.
@sid-bruno We can go with Gruvbox as a standard offering for now. From what I know, we'd want to take Q1 2026 to finalise the theme schema and openup custom themes in Q2 2026 Also, we wouldn't want to have the response pane to have a separate shade of yellow Here is Gruvbox light on vscode |
Okay, so i have to make the response pane with the same shade of yellow. |
If you have the time, sure If not, we'll adopt the PR and add it in later in the month |
Yes, now i will fix the response pane with light theme |
FraCata00
force-pushed
the
feature/gruvbox-theme
branch
from
81144b0 to
67bd0de
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/themes/dark/gruvbox.js:
- Around line 337-360: The button.close.hoverBorder currently uses an empty
string which can produce invalid CSS; update the button.close.hoverBorder value
to a safe token (e.g., 'transparent' or reuse button.close.border) so consumers
always receive a valid CSS value; update the hoverBorder for the close variant
in the button object (button.close.hoverBorder) accordingly.
🧹 Nitpick comments (3)
packages/bruno-app/src/themes/dark/gruvbox.js (2)
3-91: Avoid mutating the exportedpalette(make it immutable in one construction).Right now
palette.intent/palette.syntaxare assigned afterexport const palette = ...(Line 63, Line 70). It works, but it’s a footgun for maintainability and static analysis.Proposed refactor (single construction, no mutation)
-// Gruvbox Dark palette ufficiale -export const palette = { +// Official Gruvbox Dark palette +const primary = { + SOLID: '#d79921', // yellow + TEXT: '#fabd2f', // bright yellow + STRONG: '#fabd2f', + SUBTLE: '#b57614' // yellow dark +}; + +const hues = { + RED: '#cc241d', // red + RED_BRIGHT: '#fb4934', // bright red + ROSE: '#fb4934', + BROWN: '#d65d0e', // orange + ORANGE: '#fe8019', // bright orange + YELLOW: '#fabd2f', // bright yellow + GREEN: '#98971a', // green + GREEN_BRIGHT: '#b8bb26', // bright green + GREEN_DARK: '#79740e', + TEAL: '#689d6a', // aqua + CYAN: '#8ec07c', // bright aqua + BLUE: '#458588', // blue + BLUE_BRIGHT: '#83a598', // bright blue + INDIGO: '#83a598', + VIOLET: '#b16286', // purple + PURPLE: '#d3869b', // bright purple + PINK: '#d3869b' +}; + +const system = { + CONTROL_ACCENT: primary.SOLID +}; + +const background = { + BASE: '#282828', // bg0 + MANTLE: '#1d2021', // bg0_h (hard contrast) + CRUST: '#1d2021', + SURFACE0: '#32302f', // bg1 + SURFACE1: '#3c3836', // bg2 + SURFACE2: '#504945' // bg3 +}; + +const text = { + BASE: '#ebdbb2', // fg + SUBTEXT2: '#d5c4a1', // fg1 + SUBTEXT1: '#bdae93', // fg2 + SUBTEXT0: '#a89984' // fg3 +}; + +const overlay = { + OVERLAY2: '#7c6f64', // gray + OVERLAY1: '#665c54', // gray dark + OVERLAY0: '#504945' // bg3 +}; + +const border = { + BORDER2: '#504945', // bg3 + BORDER1: '#3c3836', // bg2 + BORDER0: '#32302f' // bg1 +}; + +const utility = { + WHITE: '#fbf1c7', // fg0 + BLACK: '#1d2021' // bg0_h +}; + +const intent = { + INFO: hues.BLUE_BRIGHT, + SUCCESS: hues.GREEN_BRIGHT, + WARNING: hues.ORANGE, + DANGER: hues.RED_BRIGHT +}; + +const syntax = { + // Core language structure + KEYWORD: '#fb4934', // bright red + TAG: '#fb4934', + + // Identifiers & properties + VARIABLE: '#ebdbb2', // fg + PROPERTY: '#83a598', // bright blue + DEFINITION: '#fabd2f', // bright yellow + + // Literals + STRING: '#b8bb26', // bright green + NUMBER: '#d3869b', // bright purple + ATOM: '#d3869b', + + // Operators & punctuation + OPERATOR: '#fe8019', // bright orange + TAG_BRACKET: '#a89984', // fg3 + + // Comments + COMMENT: '#928374' // gray +}; + +export const palette = { + primary, + hues, + system, + background, + text, + overlay, + border, + utility, + intent, + syntax }; - -palette.intent = { - INFO: palette.hues.BLUE_BRIGHT, - SUCCESS: palette.hues.GREEN_BRIGHT, - WARNING: palette.hues.ORANGE, - DANGER: palette.hues.RED_BRIGHT -}; - -palette.syntax = { - // Core language structure - KEYWORD: '#fb4934', // bright red - TAG: '#fb4934', - ... -};
93-256: Deduplicate hard-coded theme colors by reusing palette tokens.
draftColor(Line 98) andworkspace.accent(Line 251) repeat#d79921. Preferpalette.primary.SOLID(orpalette.system.CONTROL_ACCENT) to avoid drift.Proposed change
const gruvboxDarkTheme = { mode: 'dark', brand: palette.primary.SOLID, text: palette.text.BASE, textLink: palette.hues.BLUE_BRIGHT, - draftColor: '#d79921', + draftColor: palette.primary.SOLID, bg: palette.background.BASE, @@ workspace: { - accent: '#d79921', + accent: palette.primary.SOLID, border: palette.border.BORDER2, button: { bg: palette.background.SURFACE0 } },packages/bruno-app/src/themes/index.js (1)
35-112: Optional: consider a naming convention now if soft/medium/hard variants are likely soon.If you plan to add Gruvbox variants, deciding early between e.g.
gruvbox-dark-softvs{ id: 'gruvbox-dark', variant: 'soft' }avoids later UI migration churn.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.jspackages/bruno-app/src/themes/light/gruvbox.js
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/bruno-app/src/themes/light/gruvbox.js
🧰 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/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.js
🧠 Learnings (2)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
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/themes/dark/gruvbox.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.js
🧬 Code graph analysis (1)
packages/bruno-app/src/themes/index.js (2)
packages/bruno-app/src/themes/dark/gruvbox.js (1)
gruvboxDarkTheme(93-687)packages/bruno-app/src/themes/light/gruvbox.js (1)
gruvboxLightTheme(93-687)
🔇 Additional comments (3)
packages/bruno-app/src/themes/dark/gruvbox.js (2)
93-689: Theme token coverage and structure look consistent with the existing theme schema.The object shape is comprehensive (sidebar/modal/console/grpc/etc.) and uses palette-driven tokens throughout, which should make future variant work (soft/medium/hard) feasible without reshaping consumers.
274-301: The review comment premise appears incorrect. There are no separate "response pane" yellow tokens in the theme. TherequestTabPanelresponse-related tokens (responseOk,responseError,responsePending,responseOverlayBg) use onlyGREEN_BRIGHT,RED_BRIGHT,BLUE_BRIGHT, and background colors—neverYELLOW. TheYELLOWtokens that do exist are used for HTTP method coding (patch), search highlighting, and developer mode styling, and they're already consistent across dark and light gruvbox variants. There is no mismatch to address here.Likely an incorrect or invalid review comment.
packages/bruno-app/src/themes/index.js (1)
13-15: Theme registration looks correct (themes map +themeRegistrymetadata are aligned).
themes['gruvbox-dark'|'gruvbox-light']andthemeRegistryentries match onid,name, andmode, sogetLightThemes/getDarkThemesshould pick them up as expected.Also applies to: 28-33, 87-96
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/themes/dark/gruvbox.js:
- Line 98: Replace the hardcoded '#d79921' usages with the palette reference:
update the draftColor property (draftColor) and the other occurrence at line 251
to use palette.primary.SOLID instead of the literal string; ensure you reference
the existing palette object in this module (or import it if missing) so both
draftColor and the second color setting consistently use palette.primary.SOLID.
🧹 Nitpick comments (1)
packages/bruno-app/src/themes/dark/gruvbox.js (1)
3-3: Use English for code comments.The comment contains Italian text ("ufficiale"). For consistency across the codebase, please use English.
📝 Suggested fix
-// Gruvbox Dark palette ufficiale +// Official Gruvbox Dark palette
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/themes/dark/gruvbox.js
🧰 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/themes/dark/gruvbox.js
🧠 Learnings (2)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
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/themes/dark/gruvbox.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/themes/dark/gruvbox.js
🔇 Additional comments (1)
packages/bruno-app/src/themes/dark/gruvbox.js (1)
93-687: Well-structured and comprehensive theme implementation.The Gruvbox Dark theme is thorough and well-organized, with comprehensive coverage of all UI components. The palette-based approach ensures consistency, and the integration with the
polishedlibrary for color manipulation is appropriate.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/themes/dark/gruvbox.js:
- Line 3: Replace the Italian comment string "Gruvbox Dark palette ufficiale"
with an English comment such as "Official Gruvbox Dark palette" so comments in
the gruvbox.js theme use English; locate the existing top-of-file comment text
and update it accordingly.
In @packages/bruno-app/src/themes/light/gruvbox.js:
- Line 3: The comment above the Gruvbox Light palette is in Italian ("Gruvbox
Light palette ufficiale"); update it to English for consistency by replacing it
with "Official Gruvbox Light palette" in the comments in the gruvbox.js file
(look for the existing comment line that contains "Gruvbox Light palette
ufficiale"). Ensure no other Italian wording remains in that comment.
🧹 Nitpick comments (2)
packages/bruno-app/src/themes/light/gruvbox.js (1)
63-91: Consider defining complete palette object upfront.Adding
intentandsyntaxproperties to the palette via mutation after export works but is less declarative. For clarity, consider defining them within the initial palette object declaration.♻️ Optional refactor
Move the
intentandsyntaxdefinitions inside the main palette object:export const palette = { primary: { /* ... */ }, hues: { /* ... */ }, system: { /* ... */ }, background: { /* ... */ }, text: { /* ... */ }, overlay: { /* ... */ }, border: { /* ... */ }, - utility: { /* ... */ } + utility: { /* ... */ }, + intent: { + INFO: '#076678', // blue dark + SUCCESS: '#79740e', // green dark + WARNING: '#af3a03', // orange dark + DANGER: '#9d0006' // red dark + }, + syntax: { + KEYWORD: '#9d0006', + TAG: '#9d0006', + VARIABLE: '#3c3836', + PROPERTY: '#076678', + DEFINITION: '#b57614', + STRING: '#79740e', + NUMBER: '#8f3f71', + ATOM: '#8f3f71', + OPERATOR: '#af3a03', + TAG_BRACKET: '#7c6f64', + COMMENT: '#928374' + } }; - -palette.intent = { - INFO: palette.hues.BLUE_BRIGHT, - SUCCESS: palette.hues.GREEN_BRIGHT, - WARNING: palette.hues.ORANGE, - DANGER: palette.hues.RED_BRIGHT -}; - -palette.syntax = { - // Core language structure - KEYWORD: '#9d0006', // red dark - TAG: '#9d0006', - - // Identifiers & properties - VARIABLE: '#3c3836', // fg - PROPERTY: '#076678', // blue dark - DEFINITION: '#b57614', // yellow dark - - // Literals - STRING: '#79740e', // green dark - NUMBER: '#8f3f71', // purple dark - ATOM: '#8f3f71', - - // Operators & punctuation - OPERATOR: '#af3a03', // orange dark - TAG_BRACKET: '#7c6f64', // fg3 - - // Comments - COMMENT: '#928374' // gray dark -};Note: You'd need to update the references to use the direct color values since self-referencing within object initialization requires the split approach.
packages/bruno-app/src/themes/dark/gruvbox.js (1)
63-91: Consider defining complete palette object upfront.Same pattern as the light theme: adding
intentandsyntaxproperties via mutation works but is less declarative. Consider defining them within the initial palette object declaration for consistency.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/light/gruvbox.js
🧰 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/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
🧠 Learnings (2)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
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/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
🧬 Code graph analysis (1)
packages/bruno-app/src/themes/light/gruvbox.js (1)
packages/bruno-app/src/themes/dark/gruvbox.js (2)
palette(4-61)palette(4-61)
🔇 Additional comments (2)
packages/bruno-app/src/themes/light/gruvbox.js (1)
93-687: LGTM! Comprehensive theme implementation.The theme object is well-structured with excellent coverage of UI components, consistent palette usage, and proper semantic color tokens. The nested organization makes it maintainable and easy to understand.
packages/bruno-app/src/themes/dark/gruvbox.js (1)
93-687: LGTM! Excellent consistency with light theme.The dark theme implementation mirrors the light theme structure perfectly while using semantically appropriate darker colors. The use of
lighten(vsdarkenin light theme) is correct for dark mode hover states. Comprehensive and maintainable.
FraCata00
force-pushed
the
feature/gruvbox-theme
branch
from
477f398 to
6415c84
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/themes/dark/gruvbox.js:
- Line 3: Update the Italian comment at the top of the dark theme file to
English: change the line "Gruvbox Dark palette ufficiale" to "Gruvbox Dark
official palette" (the top-of-file comment in
packages/bruno-app/src/themes/dark/gruvbox.js).
In @packages/bruno-app/src/themes/light/gruvbox.js:
- Line 3: Replace the Italian comment "Gruvbox Light palette ufficiale" with an
English equivalent (e.g., "Official Gruvbox Light palette" or "Gruvbox Light
official palette") so all code comments are in English; update the single-line
top comment in gruvbox.js that currently contains "Gruvbox Light palette
ufficiale" accordingly.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.jspackages/bruno-app/src/themes/light/gruvbox.js
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/bruno-app/src/themes/index.js
🧰 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/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
🧠 Learnings (3)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Applied to files:
packages/bruno-app/src/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
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/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
🧬 Code graph analysis (1)
packages/bruno-app/src/themes/light/gruvbox.js (1)
packages/bruno-app/src/themes/dark/gruvbox.js (2)
palette(4-61)palette(4-61)
🔇 Additional comments (4)
packages/bruno-app/src/themes/light/gruvbox.js (2)
63-91: Palette extensions look good.The pattern of extending the palette object with
intentandsyntaxmappings after initial definition works well and keeps the theme tokens organized by semantic purpose.
93-687: Comprehensive theme implementation.The theme object provides thorough coverage of all UI components (sidebar, modals, buttons, codemirror, grpc, etc.) with consistent use of palette references. Good use of
rgbafor transparency effects.packages/bruno-app/src/themes/dark/gruvbox.js (2)
1-1: Correct polished import for dark theme.Using
lightenfor the dark theme (vsdarkenin light theme) is the right approach for hover state adjustments in each theme mode.
93-687: Well-structured dark theme with excellent consistency.The dark theme implementation mirrors the light theme structure perfectly, making maintenance easier. All components are covered with appropriate dark-mode colors from the Gruvbox palette.
FraCata00
force-pushed
the
feature/gruvbox-theme
branch
from
6415c84 to
abd6430
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/bruno-app/src/themes/light/gruvbox.js:
- Around line 344-349: The light theme's button.close.hoverBorder is set to an
empty string instead of 'transparent'; update the hoverBorder value in the close
object (button.close.hoverBorder) within gruvbox.js from '' to 'transparent' so
it matches the dark theme and maintains consistency.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bruno-app/src/themes/dark/gruvbox.jspackages/bruno-app/src/themes/index.jspackages/bruno-app/src/themes/light/gruvbox.js
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/bruno-app/src/themes/index.js
🧰 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/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
🧠 Learnings (3)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Applied to files:
packages/bruno-app/src/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
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/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.
Applied to files:
packages/bruno-app/src/themes/light/gruvbox.jspackages/bruno-app/src/themes/dark/gruvbox.js
🔇 Additional comments (6)
packages/bruno-app/src/themes/light/gruvbox.js (3)
1-91: LGTM!Palette definition is well-structured with proper Gruvbox Light colors and helpful inline comments mapping to official palette names.
93-687: Well-structured theme object.Comprehensive coverage of all UI components with consistent use of palette references. The structure aligns with the dark theme counterpart.
274-301: Response pane color alignment pending.Per reviewer feedback, verify the response pane colors match the rest of the theme's yellow shade once the fix is applied.
packages/bruno-app/src/themes/dark/gruvbox.js (3)
1-91: LGTM!Palette correctly implements official Gruvbox Dark colors with appropriate bright variants for dark mode readability.
93-687: Solid dark theme implementation.Appropriate use of
lightenfor hover states and adjusted opacity values for dark mode visibility. Structure is consistent with the light variant.
430-461: CodeMirror styling looks intentional.Using
palette.background.BASEfor bothbgandbordercreates a seamless editor appearance in dark mode, which aligns with typical dark theme conventions.
FraCata00
force-pushed
the
feature/gruvbox-theme
branch
from
abd6430 to
f1258ca
Compare
Request pageGruvbox Light (new)
|
3 participants
Description
Add Gruvbox Dark and Light themes
Adds two new color themes based on the official Gruvbox palette:
Both themes feature:
Gruvboxcolor paletteRef #287
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.
Screenshots
Theme selection
Request page
Gruvbox Dark
Gruvbox Light
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.