Colored Windows

VS Code extension that automatically colors the status bar, title bar, and window border based on the workspace folder, helping you visually distinguish between different projects.

Features

• Visual color picker: Interactive webview with color swatches for easy selection
• Automatic prompts: Notification when opening a new folder for the first time
• Smart suggestions: Consistent color recommendations based on folder path hash
• Theme-aware palettes: 20 numbered color choices per theme for dark and light themes
• Custom colors: Full RGB spectrum support via built-in color picker
• Easy management: Change or remove colors for any folder via command palette
• Persistent settings: Colors stored globally in VS Code user settings

Usage

First Time Opening a Folder

When you open a folder that hasn't been colored yet, a notification appears with three options:

1. Pick Color - Opens an interactive color picker webview with:
   • 20 numbered theme-aware colors with the hash-based suggestion marked in the grid
   • Custom color picker (full RGB spectrum)
2. Use Suggested - Instantly applies the recommended color
3. Ignore Folder - Don't color this folder (stored as ignored)

The color picker displays actual colored swatches that you can click to preview and apply. You can also use the native HTML color picker for complete customization.

Once selected, colors are saved permanently in your VS Code user settings and automatically applied whenever you open that folder.

Commands

Access via Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

• Colored Windows: Pick Color for Current Folder - Opens color picker webview
• Colored Windows: Reset Color for Current Folder - Removes color and resets to default
• Colored Windows: Manage All Folder Colors - Browse and manage all configured folders

Quick access: Click the color icon $(symbol-color) in the status bar to open the color picker.

The status bar shows the active workspace name. Use it with the numbered picker choices when colors are hard to tell apart.

Configuration

Settings

• coloredWindows.autoPrompt (default: true)
  Automatically show notification when opening new folders
• coloredWindows.folderColors (object)
  Stores folder path to color mappings (managed automatically)
• coloredWindows.defaultDarkThemeColors (array)
  20 numbered color choices for dark themes
• coloredWindows.defaultLightThemeColors (array)
  20 numbered color choices for light themes

Default Color Palettes

Dark Theme (20 colors): #f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #2196f3, #03a9f4, #00bcd4, #009688, #4caf50, #8bc34a, #cddc39, #ffeb3b, #ffc107, #ff9800, #ff5722, #795548, #9e9e9e, #607d8b, #e57373

Light Theme (20 colors): #c62828, #ad1457, #6a1b9a, #4527a0, #283593, #1565c0, #0277bd, #00838f, #00695c, #2e7d32, #558b2f, #9e9d24, #f9a825, #ef6c00, #e65100, #8d6e63, #4e342e, #424242, #37474f, #ef5350

Custom Color Picker:
Full RGB spectrum via native HTML5 color input

How It Works

1. Activation: Extension starts when VS Code launches (onStartupFinished)
2. Detection: Reads the root workspace folder path
3. Lookup: Checks if folder exists in coloredWindows.folderColors setting
4. Prompt: If new and autoPrompt enabled, shows notification after 1-second delay
5. Storage: Saves folder-color mapping in VS Code global user settings
6. Application: Updates workbench.colorCustomizations in workspace settings:
   • statusBar.background / statusBar.foreground
   • statusBar.noFolderBackground / statusBar.noFolderForeground
   • statusBar.debuggingBackground / statusBar.debuggingForeground
   • titleBar.activeBackground / titleBar.activeForeground
   • titleBar.inactiveBackground / titleBar.inactiveForeground
   • commandCenter.foreground / commandCenter.activeForeground / commandCenter.inactiveForeground
   • window.activeBorder / window.inactiveBorder
7. Persistence: Color automatically reapplies on folder reopening
8. Theme Awareness: Detects theme changes and adjusts palette accordingly

Modern workbench layout

workbench.experimental.modernUI is experimental. The extension writes the title bar, status bar, and border colors in every layout. If VS Code renders the bars transparent, the border keeps the folder color.

Change ledger

Each user-visible change has an outcome entry in CHANGELOG+.md. Keep new entries as [DRAFT] until they ship.

Requirements

• VS Code 1.85.0 or higher

Privacy

Colored Windows runs locally. It stores folder colors in VS Code settings and makes no network calls.

License

MIT