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. Copy-Pasteable Theme Template

If you prefer to create it manually, place a .workspacetheme file in the root of your project folder. Below is the entire copy-pasteable theme file featuring a default Cherry Red layout and matching Red, Green, and Blue dark/light options in the commented-out section:

{
  "backgroundColor": "#1a1212",
  "titleBarBackgroundColor": "#281c1c",
  "statusBarBackgroundColor": "#201616",
  "activityBarBackgroundColor": "#281c1c",
  "textHighlightColor": "#ff555522"

  // =======================================================
  // PRE-CONFIGURED ALIGNING WINDOW IDENTIFIERS
  // To switch theme, copy and paste one of the sets below over the active keys above.
  // =======================================================

  // --- 🔴 CHERRY RED (Muted Dark Red) ---
  // "backgroundColor": "#1a1212",
  // "titleBarBackgroundColor": "#281c1c",
  // "statusBarBackgroundColor": "#201616",
  // "activityBarBackgroundColor": "#281c1c",
  // "textHighlightColor": "#ff555522",

  // --- 🟢 FOREST GREEN (Muted Dark Green) ---
  // "backgroundColor": "#121a12",
  // "titleBarBackgroundColor": "#1c281c",
  // "statusBarBackgroundColor": "#162016",
  // "activityBarBackgroundColor": "#1c281c",
  // "textHighlightColor": "#55ff5522",

  // --- 🔵 OCEAN BLUE (Muted Dark Blue) ---
  // "backgroundColor": "#12121a",
  // "titleBarBackgroundColor": "#1c1c28",
  // "statusBarBackgroundColor": "#161620",
  // "activityBarBackgroundColor": "#1c1c28",
  // "textHighlightColor": "#5555ff22",

  // --- 🌸 LIGHT CHERRY (Muted Light Red) ---
  // "backgroundColor": "#fff5f5",
  // "titleBarBackgroundColor": "#ffe5e5",
  // "statusBarBackgroundColor": "#ffd5d5",
  // "activityBarBackgroundColor": "#ffe5e5",
  // "textHighlightColor": "#ff555533",

  // --- 🍃 LIGHT FOREST (Muted Light Green) ---
  // "backgroundColor": "#f5fff5",
  // "titleBarBackgroundColor": "#e5ffe5",
  // "statusBarBackgroundColor": "#d5ffd5",
  // "activityBarBackgroundColor": "#e5ffe5",
  // "textHighlightColor": "#55ff5533",

  // --- 🐳 LIGHT OCEAN (Muted Light 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):

1. Workspace Theme: Create Default Theme File: Generates the clean .workspacetheme template above and opens it.
2. Workspace Theme: Reload Theme: Forces a fresh reload of .workspacetheme settings.
3. Workspace Theme: Clear Customizations: Safely clears all color styles applied by this extension.

Development, Debugging & Bundling

Running the Extension Locally

1. Open this workspace folder in VS Code.
2. Open a terminal in the directory and run npm install.
3. Press F5 (or click Run Extension in the Debug panel).
4. A new [Extension Development Host] window will spin up where your extension is fully active for live testing!

Auto-Building and Packaging to .vsix

We have included a highly convenient PowerShell script to automate version increments, compilation, and building:

1. Open your terminal in the project root.
2. Run the build script:

   powershell -ExecutionPolicy Bypass -File .\Build-Workspace.ps1
   

3. This will automatically:
   • Increment the patch version in package.json (e.g. 0.1.1 -> 0.1.2).
   • Compile and minify your TypeScript files using esbuild.
   • Package it into a portable installation file (e.g. workspace-background-color-0.1.2.vsix).

Installing Your Packaged Extension

You can install your packaged .vsix directly into your main VS Code instance:

1. Open the Extensions sidebar in VS Code (Ctrl+Shift+X / Cmd+Shift+X).
2. Click the ... menu (Views and More Actions) in the top-right corner.
3. Select Install from VSIX... and select your generated .vsix file.