Workspace Color Picker

Visual color picker with real-time preview for VS Code workspace colors. No more guessing hex codes!

The Problem

When working with multiple VS Code workspaces, it's helpful to color-code them (titlebar, activity bar, status bar). But typing hex codes or picking from presets is tedious - there's no visual picker with live preview.

The Solution

This extension provides a dark-themed color picker that lets you:

Drag to find the perfect color visually
See your workspace colors update on release
Apply or cancel with one click

Features

Feature	Description
Visual Picker	Saturation/brightness square + hue slider
Dark Theme	Matches VS Code's dark UI
Live Preview	Workspace colors update in real-time
Preset Palettes	Dark and light color presets to choose from
Recent Colors	Remembers your last 8 colors across sessions
Editable Hex Input	Type hex codes directly or copy to clipboard
One-Click Apply	Keep or revert with Apply/Cancel buttons

Screenshot

Color Picker UI

Usage

Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Run: Workspace Color: Open Color Picker
Drag the color picker to find your color
Release to preview in your workspace
Click Apply to keep, or Cancel to revert

What Gets Colored

Title Bar (active & inactive)
Activity Bar (left sidebar icons)
Status Bar (bottom bar)

+------------------------------------------+
| ============= TITLE BAR ================ |
+----+-------------------------------------+
| == |                                     |
| == |     Editor Area                     |
| == |     (unchanged)                     |
| == |                                     |
+----+-------------------------------------+
| ============= STATUS BAR =============== |
+------------------------------------------+

Requirements

VS Code 1.85.0 or higher
A workspace folder must be open (colors are per-workspace)

Roadmap

[x] Preset color palettes (dark colors, pastels)
[x] Recent colors history
[x] Keyboard shortcuts (Alt+Cmd+- darken, Alt+Cmd+= lighten)
[x] Individual control per element (Element Settings panel)
[x] Icon contrast slider for activity bar visibility
[ ] Color harmony suggestions

Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Test (press F5 in VS Code to launch Extension Development Host)

Contributing

Found a bug or have a feature request? Open an issue.

License

MIT - See LICENSE for details.

Made by Marius Giurgi