Glaze

Subtle, automatic color tints for your VS Code windows.

Ever lost track of which VS Code window is which? Glaze attempts to solve this by giving each workspace a unique color tint/glaze derived from its directory path. The colors blend with your current theme's colors, so your editor still looks great, just subtly different per project.

How It Works

Glaze generates a deterministic color from a hash of your workspace's directory path, meaning the same project always gets the same color tint. These colors are intelligently blended with your active VS Code theme's colors, so they look natural and fit well with most themes regardless of color palette. And when you switch themes, Glaze automatically re-adapts.

Important: Workspace Settings

Caution

Glaze modifies your project/workspace .vscode/settings.json file.

To apply color tints, Glaze writes to the workbench.colorCustomizations section of your workspace's .vscode/settings.json. This is the only mechanism VS Code provides for programmatic color customization.

A few things to know:

• Non-destructive: Glaze only manages its own specific color keys. Existing color customizations are left untouched.
• Disabled by default: Because of the settings file modification, Glaze ships disabled. You must explicitly enable it after installation.
• Fully reversible: Disabling Glaze cleanly removes all of its color entries from your workspace settings.

If your .vscode/settings.json is checked into version control, consider using the Workspace Config+ extension. It lets you split workspace settings into settings.shared.json and settings.local.json files, which get automatically merged into settings.json. Add both settings.json and settings.local.json to your .gitignore, and only the shared settings get committed.

Getting Started

1. Install

Search for "Glaze" in the VS Code Extensions view (Cmd+Shift+X / Ctrl+Shift+X), install from the VS Code Marketplace / OpenVSX Registry, or via the command line:

code --install-extension jimeh.glaze

2. Enable

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run one of:

• Glaze: Enable Globally: Enables Glaze for all workspaces.
• Glaze: Enable for This Workspace: Enables Glaze only for the current workspace.

That's it, your title bar, activity bar, and status bar should all be tinted. You can turn tinting of each element on and off individually in settings.

3. Explore

The status bar shows Glaze's current state. Click it to open the Quick Menu for toggling, previewing colors, randomizing your tint seed, or manually setting a base tint hue override if you like.

Features & Configuration

Glaze is highly configurable — color styles, harmonies, UI element selection, theme blend modes, and workspace identifier sources can all be tuned. The easiest way to explore all available settings is through the VS Code Settings UI:

1. Open Settings (Cmd+, / Ctrl+,)
2. Search for @ext:jimeh.glaze

All settings include descriptions and sensible defaults.

Theme Color Matching

One of Glaze's key features is its ability to produce tints that fit naturally with your current theme's colors.

It does this by blending the tint color with the theme's background colors to produce the final applied tint. VS Code's extension API, however, does not expose the active theme's resolved color values. To get around this limitation, Glaze ships with a precomputed lookup table mapping theme names to their color values.

The lookup table is generated from:

• All built-in VS Code themes extracted from the latest VS Code release.
• The top 250 most-installed theme extensions from both the VS Code Marketplace and the OpenVSX Registry, merged and deduplicated.

If your theme isn't in the lookup table, you can provide its colors manually via the glaze.theme.colors setting. See the setting's description in the VS Code Settings UI for the expected format.

You can also open an issue to request that a specific theme be added to the built-in lookup table.

Screenshots

The screenshots below cover a small selection of what Glaze can look like. Between color styles, color harmonies, and theme blend factor, it is quite customizable.

Dark	Light

High Contrast Dark	High Contrast Light

Style: Vibrant	Style: Neon

Harmony: Analogous	Harmony: Accent

Color Styles	Color Harmonies

Commands

Access these from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

Command	Description
Glaze: Enable Globally	Enable Glaze for all workspaces
Glaze: Disable Globally	Disable Glaze for all workspaces
Glaze: Enable for This Workspace	Enable Glaze for the current workspace only
Glaze: Disable for This Workspace	Disable Glaze for the current workspace only
Glaze: Show Status	Display current Glaze status and configuration
Glaze: Show Color Palette Preview	Preview the generated color palette
Glaze: Randomize Tint Seed	Randomize the seed to get a different color
Glaze: Reset Tint Seed	Reset the seed back to the default

FAQ

Can I exclude Glaze's changes from version control?

See Important: Workspace Settings above.

How do I completely remove Glaze's color changes?

Run Glaze: Disable Globally or Glaze: Disable for This Workspace from the Command Palette. This removes all Glaze-managed color entries from your workspace settings.

Does it work with Remote Development?

Yes. Glaze runs in the VS Code UI and applies tints based on the workspace path, regardless of whether the workspace is local or remote.

License

MIT