Colored Windows

VS Code extension that automatically colors the status bar and title bar 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: Different color sets optimized 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:
   • Suggested color (hash-based recommendation)
   • 8 Quick colors (theme-aware palette)
   • 17+ Extended palette colors
   • 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.

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)
  8-color palette for dark themes
• coloredWindows.defaultLightThemeColors (array)
  8-color palette for light themes

Default Color Palettes

Dark Theme (8 colors):
#0e639c, #1e7145, #a63e17, #5c2d91, #b5650d, #065e5e, #8b1f41, #3c6478

Light Theme (8 colors):
#007acc, #22863a, #d73a49, #6f42c1, #e36209, #0598a0, #c24e00, #586069

Extended Palette (17+ colors):
Additional blues, greens, reds, purples, oranges, and teals automatically adjusted for theme

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.noFolderBackground
   • statusBar.debuggingBackground
   • titleBar.activeBackground
   • titleBar.inactiveBackground
7. Persistence: Color automatically reapplies on folder reopening
8. Theme Awareness: Detects theme changes and adjusts palette accordingly