Project Colours
Give every project window its own colour, so you can tell your VS Code windows
apart at a glance and stop typing into the wrong one.
Project Colours paints a few parts of the window (title bar, activity bar,
status bar, window border) with a colour chosen per project. Everything else
stays as your theme defines it: the editor, the terminal, the panel and side bar
backgrounds, icons and fonts are never touched. Light and dark themes alike.
Title bar not changing? VS Code only lets extensions colour its own
(custom) title bar. Set "window.titleBarStyle": "custom" if yours is native.
Getting started
Click Pick project colour at the left end of the status bar, and pick a
colour. That's it.
The first entry in the list is the colour least similar to those of your other
recent projects, and colours already in use say which projects use them. The
same list lets you choose which parts of the window are painted, or remove the
colour.
Afterwards the status bar entry shows the colour's name; click it again to
change it. Enable projectColours.autoAssign to let new projects get a distinct
colour on their own.
Commands
| Command |
What it does |
| Project Colours: Set Colour for This Project... |
Pick a palette colour, the suggested one, or any hex colour. |
| Project Colours: Assign the Most Distinct Colour to This Project |
Same as accepting the suggestion, without the picker. |
| Project Colours: Remove Colour from This Project |
Back to your theme's colours. Auto-assignment will not recolour the project afterwards. |
| Project Colours: Choose Coloured Surfaces... |
Select which parts of the window carry the colour. |
Settings
| Setting |
Default |
Description |
projectColours.colour |
(empty) |
The project's colour, as #rrggbb or #rgb. Set it in the Workspace settings tab. |
projectColours.surfaces |
see below |
Which parts of the window are painted. |
projectColours.autoAssign |
false |
Give a distinct colour to every trusted project that has none. |
Surfaces
| Surface |
Default |
Painted elements |
titleBar |
on |
Title bar and command centre. |
activityBar |
on |
Activity bar and its badges. |
statusBar |
on |
Status bar and the remote indicator. |
windowBorder |
on |
Thin border around the window. |
activeTab |
off |
Accent line on top of the active editor tab. |
panelBorders |
off |
Borders of the side bar and the bottom panel. |
controls |
off |
Buttons, badges and progress bars. |
Things to know
- Window border: only drawn on platforms that support it.
- Where the colour is saved: in the project's
.vscode/settings.json (or
its .code-workspace file). Commit it if the whole team should see the same
colour, or keep the file out of version control if colours are a personal
choice.
- Restricted Mode: auto-assignment never writes into untrusted workspaces.
It runs once you trust the workspace.
- Uninstalling: the colours stay in the settings files. Run Remove Colour
from This Project first in the projects you want back to normal.
License
Created and maintained by KindSpells Labs.
Distributed under MIT License.
