Workspace Background Color VS Code Extension
A premium, lightweight, and reactive VS Code extension that dynamically sets your workspace colors based on a .workspacetheme configuration file in the project's root. Designed specifically to help you tell apart multiple open projects at a glance!
Features
- ✨ Zero-Config Activation: Automatically applies colors as soon as your workspace opens.
- 🔄 Reactive Hot-Reloading: Instantly updates colors when you edit and save your
.workspacetheme file.
- 🎨 Safe Workspace Settings Sync: Merges dynamically with your
.vscode/settings.json. Deleting or modifying the file only reverts colors set by this extension, preserving all of your other manual configurations.
- 💬 No-Fuss Comments: Write annotations using standard single-line
// comments directly in the config. Our custom parser strips them out automatically before applying.
Getting Started
1. Generating a Configuration File Automatically
Instead of creating the file manually, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) in any workspace and run:
Workspace Theme: Create Default Theme File
This automatically generates a fully pre-configured .workspacetheme file in your workspace root, opens it for editing, and instantly applies the default colors!
2. Ready-to-Use Theme Templates
If you prefer to create the configuration manually, place a .workspacetheme file in the root of your project folder and paste any of the curated presets below:
🕶️ Dark Mode Presets
🔴 Cherry Red
{
"backgroundColor": "#1a1212",
"titleBarBackgroundColor": "#281c1c",
"statusBarBackgroundColor": "#201616",
"activityBarBackgroundColor": "#281c1c",
"textHighlightColor": "#ff555522"
}
🟢 Forest Green
{
"backgroundColor": "#121a12",
"titleBarBackgroundColor": "#1c281c",
"statusBarBackgroundColor": "#162016",
"activityBarBackgroundColor": "#1c281c",
"textHighlightColor": "#55ff5522"
}
🔵 Ocean Blue
{
"backgroundColor": "#12121a",
"titleBarBackgroundColor": "#1c1c28",
"statusBarBackgroundColor": "#161620",
"activityBarBackgroundColor": "#1c1c28",
"textHighlightColor": "#5555ff22"
}
☀️ Light Mode Presets
🌸 Light Cherry Red
{
"backgroundColor": "#fff5f5",
"titleBarBackgroundColor": "#ffe5e5",
"statusBarBackgroundColor": "#ffd5d5",
"activityBarBackgroundColor": "#ffe5e5",
"textHighlightColor": "#ff555533"
}
🍃 Light Forest Green
{
"backgroundColor": "#f5fff5",
"titleBarBackgroundColor": "#e5ffe5",
"statusBarBackgroundColor": "#d5ffd5",
"activityBarBackgroundColor": "#e5ffe5",
"textHighlightColor": "#55ff5533"
}
🐳 Light Ocean Blue
{
"backgroundColor": "#f5f5ff",
"titleBarBackgroundColor": "#e5e5ff",
"statusBarBackgroundColor": "#d5d5ff",
"activityBarBackgroundColor": "#e5e5ff",
"textHighlightColor": "#5555ff33"
}
Extension Commands
Access these commands from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
Workspace Theme: Create Default Theme File: Generates the clean .workspacetheme template above and opens it.Workspace Theme: Reload Theme: Forces a fresh reload of .workspacetheme settings.Workspace Theme: Clear Customizations: Safely clears all color styles applied by this extension.
🔗 GitHub Repository
Visit our GitHub Repository to check the source code, report issues, request features, or contribute.
🛠️ Developer Guide
If you want to contribute, build the project from source, or test local changes, check out the Developer Documentation for full instructions on local setup, debugging, scripts, and our packaging pipeline.
