fix: updated the selected state colors of tabs in dev tools by chirag-bruno · Pull Request #6465 · usebruno/bruno

chirag-bruno · 2025-12-18T19:57:02Z

Description

Updated the color of the devtools tab buttons to match the bruno brand color

Contribution Checklist:

I've used AI significantly to create this pull request
The pull request only addresses one issue or adds one feature.
The pull request does not introduce any breaking changes
I have added screenshots or gifs to help explain the change if applicable.
I have read the contribution guidelines.
Create an issue and link to the pull request.

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

Refactor
- Unified checkbox color definitions across UI themes to use a centralized brand color constant, ensuring consistent theming across the application.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-18T19:57:12Z

Walkthrough

Two theme configuration files updated with centralized color management: hard-coded checkbox colors replaced with dynamic references to the colors.BRAND constant. Dark theme changed from #0078d4 and light theme from #0d6efd. No logic or control flow alterations.

Changes

Cohort / File(s)	Summary
Theme Color Standardization `packages/bruno-app/src/themes/dark.js`, `packages/bruno-app/src/themes/light.js`	Replaced hard-coded checkpoint colors with `colors.BRAND` reference: dark theme (`#0078d4` → `colors.BRAND`), light theme (`#0d6efd` → `colors.BRAND`). Centralizes brand color management across themes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Straightforward configuration changes with consistent pattern applied across both theme files
No logic or control flow modifications

Possibly related PRs

feat: design tweaks #6463: Switches hard-coded color values to centralized brand/accent tokens in theme files.
feat: design updates #6345: Modifies the same theme files with related color token consolidation.

Suggested reviewers

lohit-bruno
helloanoop
bijin-bruno

Poem

🎨 Colors once scattered, now brought to one place,
Brand harmony flowing through each interface,
From dark to light, they dance as one—
Centralized beauty, elegantly done! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title mentions updating 'selected state colors of tabs in dev tools', but the actual changes modify checkbox colors in theme files (dark.js and light.js), not tab colors.	Update the title to accurately reflect the changes, e.g., 'fix: use brand color for checkbox UI elements' or 'fix: unify checkbox colors with brand color in themes'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a05b04 and 2a94f7b.

📒 Files selected for processing (2)

packages/bruno-app/src/themes/dark.js (1 hunks)
packages/bruno-app/src/themes/light.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() not func ()
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.js
packages/bruno-app/src/themes/light.js

🧠 Learnings (3)

📓 Common learnings

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

📚 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.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.js
packages/bruno-app/src/themes/light.js

🧬 Code graph analysis (1)

packages/bruno-app/src/themes/dark.js (1)

packages/bruno-app/src/themes/light.js (1)

colors (1-36)

⏰ 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: SSL Tests - macOS
GitHub Check: SSL Tests - Linux
GitHub Check: SSL Tests - Windows
GitHub Check: Playwright E2E Tests
GitHub Check: Unit Tests
GitHub Check: CLI Tests

🔇 Additional comments (2)

packages/bruno-app/src/themes/dark.js (1)

491-491: LGTM! Checkbox color now uses the brand constant.

Centralizing to colors.BRAND improves maintainability and aligns the console checkbox styling with Bruno's brand identity.

packages/bruno-app/src/themes/light.js (1)

496-496: LGTM! Consistent with the dark theme change.

Using colors.BRAND here maintains theme consistency and ties the console checkbox color to the brand identity across both light and dark modes.

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

fix: updated the selected state colors of tabs in dev tools

2a94f7b

chirag-bruno requested review from bijin-bruno, helloanoop, lohit-bruno and naman-bruno as code owners December 18, 2025 19:57

pull-request-size bot added the size/XS label Dec 18, 2025

bijin-bruno approved these changes Dec 18, 2025

View reviewed changes

bijin-bruno merged commit 7164119 into usebruno:main Dec 18, 2025
8 checks passed

This was referenced Dec 23, 2025

update: modal styles #6487

Merged

feat: default dark mode theme tweaks #6531

Merged

fix: replace hardcoded yellow text color with theme brand color #6538

Merged

feat: update theme selector in preferences modal #6550

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: updated the selected state colors of tabs in dev tools#6465

fix: updated the selected state colors of tabs in dev tools#6465
bijin-bruno merged 1 commit intousebruno:mainfrom
chirag-bruno:fix/devtools-color

chirag-bruno commented Dec 18, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

chirag-bruno commented Dec 18, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Contribution Checklist:

Publishing to New Package Managers

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chirag-bruno commented Dec 18, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 18, 2025 •

edited

Loading