Workspace Color Theme

This extension is a fork of the original unique-window-colors by Stuart Robinson. All credit for the original concept and implementation goes to Stuart.

Automatically generates unique color themes for each VS Code workspace, helping you visually distinguish between multiple open windows at a glance.

Features

• 🎨 Automatic Color Generation - Each workspace gets a unique color theme based on its folder path
• 🌓 Light & Dark Themes - Support for both light and dark theme variations
• 🎯 Active/Inactive States - Different colors for active and inactive windows
• 🛠️ Customizable - Override with your own base color or modify generated colors
• 🧹 Auto-cleanup - Option to remove settings files when closing windows

How it Works

When you open a workspace, this extension:

1. Generates a unique color based on a hash of the workspace folder path
2. Creates a comprehensive color theme with proper contrast ratios
3. Writes the theme to .vscode/settings.json
4. Applies colors to:
   • Activity bar (background, borders, badges)
   • Title bar (active and inactive states)
   • Status bar
   • Various UI elements with appropriate foreground colors

The generated settings file is automatically cleaned up when you close the window (unless modified or configured otherwise).

Usage with Git

To avoid checking .vscode/settings.json in to your remote repository without modifying .gitignore, you can either:

1. locally: add .vscode/settings.json to your project's .git/info/exclude file

   or

2. globally: create and use a global .gitignore_global file like so:

   git config --global core.excludesfile ~/.gitignore_global

Configuration

Extension Settings

This extension contributes the following settings:

• windowColors.🌈 Theme: Choose between "dark", "light", or "remove" themes
• windowColors.🌈 BaseColor: Set a custom base color (hex or CSS color name)
• windowColors.🌈 DeleteSettingsFileUponExit: Auto-delete settings file on window close

Switching Themes

Colors are not automatically overwritten to preserve your customizations. To switch between light and dark themes:

1. Set windowColors.🌈 Theme to "remove"
2. Reload the VS Code window (Cmd+Shift+P → "Reload Window")
3. Change the theme setting to your desired option
4. Reload the window again

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X)
3. Search for "Workspace Color Theme"
4. Click Install

From VSIX (Local Development)

# Build the extension
npm install
npm run compile
npx vsce package

# Install in VS Code/Cursor
code --install-extension workspace-color-theme-*.vsix
# or
cursor --install-extension workspace-color-theme-*.vsix

Development

Prerequisites

• Node.js
• npm or pnpm
• VS Code

Setup

# Clone the repository
git clone https://github.com/johnlindquist/unique-window-colors.git
cd unique-window-colors

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode for development
npm run watch

Code Quality

This project uses Biome for formatting and linting:

# Format code
npm run format

# Run linter
npm run lint

# Run both formatter and linter with fixes
npm run check:fix

# Check without fixes
npm run check

Publishing

# Make sure you have vsce installed
npm install -g vsce

# Package the extension
npx vsce package

# Publish (requires publisher token)
./publish.sh

Known Issues

• Multi-root workspaces: Only the first opened folder determines the color theme
• Theme switching: Requires manual removal of existing colors before switching between light/dark themes
• Color flicker: Brief color changes may occur when opening new windows (this is normal)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

• Original extension by Stuart Robinson - unique-window-colors
• Hashing and color generation adapted from Edd Turtle's blog
• Workspace detection inspired by Van Huynh's VS Code extension tutorial