Skip to content

Add rainbow color mode to status bar#316988

Open
bocan wants to merge 4 commits into
microsoft:mainfrom
bocan:feat/rainbox-statusbar
Open

Add rainbow color mode to status bar#316988
bocan wants to merge 4 commits into
microsoft:mainfrom
bocan:feat/rainbox-statusbar

Conversation

@bocan
Copy link
Copy Markdown
Contributor

@bocan bocan commented May 18, 2026

Related to #316987

Adds a new 'workbench.statusBar.colorMode' setting with values 'default' and 'rainbow' (defaulting to 'default'). When set to 'rainbow', each unique status bar entry category is assigned an HSL hue spread evenly across 0 to 300 degrees, giving the status bar a visible rainbow gradient.

Entries currently showing an error or warning kind are skipped so their semantic theme colors win and visibly break the rainbow, making alerts easy to spot. Kind transitions trigger a recolor immediately so entries rejoin or leave the rainbow on the spot.

Includes unit tests for the hue computation helper.

This is what it looks like:

Screenshot 2026-05-18 at 09 55 13

Adds a new 'workbench.statusBar.colorMode' setting with values 'default' and 'rainbow' (defaulting to 'default'). When set to 'rainbow', each unique status bar entry category is assigned an HSL hue spread evenly across 0 to 300 degrees, giving the status bar a visible rainbow gradient.

Entries currently showing an error or warning kind are skipped so their semantic theme colors win and visibly break the rainbow, making alerts easy to spot. Kind transitions trigger a recolor immediately so entries rejoin or leave the rainbow on the spot.

Includes unit tests for the hue computation helper.
Copilot AI review requested due to automatic review settings May 18, 2026 10:26
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new workbench.statusBar.colorMode setting with a "rainbow" option that assigns each unique status bar entry category an HSL hue spread across 0–300°. Error/warning-kind entries are exempted so their semantic colors still stand out, and kind transitions trigger an immediate recolor. Includes unit tests for the hue helper.

Changes:

  • Add workbench.statusBar.colorMode setting (default | rainbow) in the workbench configuration registry.
  • Implement rainbow coloring in StatusbarPart (per-entry inline backgrounds, hard-coded part background/foreground, alert-kind opt-out, recolor on entry update and config change) and propagate the new IConfigurationService dependency to MainStatusbarPart/AuxiliaryStatusbarPart; add a rainbow-color CSS class alongside has-background-color for label padding.
  • Add unit tests for the exported statusBarRainbowHue helper.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File Description
src/vs/workbench/browser/workbench.contribution.ts Registers the new workbench.statusBar.colorMode configuration with enum descriptions.
src/vs/workbench/browser/parts/statusbar/statusbarPart.ts Core rainbow logic, helper, alert-kind detection, part bg/fg override, and DI wiring.
src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css Mirrors has-background-color label padding rules for .rainbow-color.
src/vs/workbench/test/browser/parts/statusbar/statusbarModel.test.ts Unit tests for statusBarRainbowHue across edge cases.

Comment thread src/vs/workbench/browser/parts/statusbar/statusbarPart.ts Outdated
Comment thread src/vs/workbench/browser/parts/statusbar/statusbarPart.ts Outdated
Comment thread src/vs/workbench/browser/parts/statusbar/statusbarPart.ts
Comment thread src/vs/workbench/browser/parts/statusbar/statusbarPart.ts
bocan added 2 commits May 18, 2026 12:56
Addresses PR review feedback:

- Add 'kind' to IStatusbarViewModelEntry (sourced from StatusbarEntryItem) so rainbow coloring no longer infers warning/error state by introspecting private DOM class names on the entry container.

- Key rainbow categories by extensionId (falling back to entry id) instead of the localized, user-visible entry name. The same logical entry now receives the same hue across display languages, and entries from different providers that share a name no longer collide into one hue.
Previously the rainbow color mode hard-coded the part background to microsoft#111111 and the part foreground to #ffffff. That regressed light and high-contrast themes (the bar turned dark regardless of the active theme) and bypassed any IStatusbarStyleOverride such as the debug-session orange. The bar now uses the regular theme colors and styleOverride pipeline. Rainbow entries still need a light label color because their hsl backgrounds are picked at 27% lightness; that is now expressed in CSS scoped to .rainbow-color rather than overriding the whole part.
accessor.update previously called updateRainbowColors() on every change to an entry, performing O(N) DOM writes per update even though the rainbow layout only depends on the visible entry set and the per-entry alert state. Track the last alert state in the accessor closure and only recompute when it actually flips.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants