ChromaBar

A Visual Studio Code extension that helps you visually distinguish between multiple VS Code windows by customizing the title bar color on a per-workspace basis. Perfect for developers juggling multiple projects simultaneously.

🎯 Why ChromaBar?

When working with multiple VS Code windows, it's easy to lose track of which window contains which project. ChromaBar solves this by letting you assign vibrant, distinctive colors to each workspace's title bar.

Key Benefits:

• Window Independence: Each project window has its own color
• Persistent Memory: Colors are remembered when you reopen projects
• Zero Confusion: Instantly identify your projects at a glance
• Workspace-Specific: Colors are stored per project, not globally

✨ Features

• 🎨 Vibrant Color Palette: 7 carefully selected colors from warm to cool tones
• 💾 Persistent Colors: Automatically remembers colors per workspace
• 🎯 Quick Access: One-click color selection via status bar icon
• 🔄 Easy Reset: Remove colors instantly when needed
• ⚡ Zero Performance Impact: Lightweight and fast

🚀 Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+P / Cmd+P to open the Quick Open dialog
3. Select Extensions: Install Extension
4. Search for "Chromabar"
5. Install!

📖 Usage

Quick Start

1. Click the paint icon (🎨) in the status bar (Bottom-right)
2. Select a color from the palette
3. Done! Your title bar now has a unique color.

Colors are preserved on in the workspace, and will be used every time you open a project 🎉

Commands

Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type:

• ChromaBar: Select Color - Opens the color picker
• ChromaBar: Reset Color - Removes all color customizations

🎨 Color Palette

ChromaBar features a carefully curated gradient palette:

Color	Hex	Name
	#FA9203	Pizazz
	#E14F08	Trinidad
	#B31A15	Thunderbird
	#6D0E4E	Rose Bud Cherry
	#462969	Jacarta
	#4A4F9E	Victoria
	#4F7ABB	Steel Blue

Troubleshooting

Chromabar requires VS Code's custom title bar to work (Enabled by default in VSCode and Cursor)

ChromaBar will prompt you if this isn't set. If not, enable it via User Settings:

{
  "window.titleBarStyle": "custom"
}

🏗️ How It Works

ChromaBar modifies VS Code's workbench.colorCustomizations at the workspace level:

1. Per-Workspace Colors: Each folder/workspace maintains its own color setting
2. Persistent Storage: Colors are saved in .vscode/settings.json in your project folder
3. Automatic Restoration: When you reopen a project, ChromaBar automatically restores its color
4. Window Independence: Each VS Code window can have a different color - perfect for multi-project workflows
5. Native Integration: Uses VS Code's built-in theming system for compatibility

Quick Development Setup

# Clone the repository
git clone https://github.com/yourusername/chromabar.git
cd chromabar

# Install dependencies
npm install

# Compile and watch for changes
npm run watch

# Press F5 in VS Code to test

📝 Changelog

See CHANGELOG.md for release history.

🐛 Known Limitations

• Requires "window.titleBarStyle": "custom" for title bar colors
• Some Linux distributions with native title bars may not support customization
• Remote development may require window reload for colors to apply

📜 License

MIT © ChromaBar Contributors

🙏 Acknowledgments

• Color palette inspired by dopely.top
• Built with the VS Code Extension API
• Icons from VS Code's Codicon library

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Marketplace: Rate & Review

Made with ❤️ for developers who love organized workspaces

© 2025 ChromaBar