Green Barrette
A dark color theme for Visual Studio Code. The palette comes from a screenshot of a highlighted C# snippet: each syntax color was measured from the pixels, not picked by eye.
Palette
| Role |
Color |
Source |
| Editor background |
#151515 |
sampled |
| Plain text, punctuation, operators |
#c0c0b8 |
sampled |
| Comments (italic) |
#6a8372 |
sampled |
Keywords and modifiers (class, public, async, var, await, return) |
#4d9375 |
sampled |
| Types, class names, function and method calls |
#80a665 |
sampled |
Properties, fields, member access (.Key, .Page) |
#bd976a |
sampled |
| Parameter declarations, constants, numbers, built-in globals |
#c99076 |
sampled |
| Borders |
#2c2c2c |
sampled (UI chrome) |
| Muted UI text |
#898781 |
sampled (UI chrome) |
| Strings |
#8eb0bf |
added (not in screenshot) |
| Regex / string escapes |
#c4704f / #e6cc77 |
added |
| Errors, deletions |
#cb7676 |
added |
The screenshot had no strings, numbers or regex literals, so those colors were added to fit the palette. Strings use a cool dusty blue so they don't blend with the coral parameters and numbers. If you prefer a warm string color, #c98a7d (rose) also works: pass it as the second argument to build_theme.py.
Install
- In VS Code, open the Extensions view.
- Click
... (top right) and choose Install from VSIX....
- Pick
green-barrette-theme-1.0.0.vsix.
- Open Preferences: Color Theme (
Ctrl+K Ctrl+T / Cmd+K Cmd+T) and select Green Barrette.
From a terminal: code --install-extension green-barrette-theme-1.0.0.vsix
Semantic highlighting
The theme turns semantic highlighting on. With a language server running (C# Dev Kit, TypeScript), this improves accuracy over TextMate grammars alone:
- Static class receivers such as
PageWindow.FirstRows(...) render as types (green).
- Parameter declarations are coral and their later usages stay plain, as in the screenshot.
- Browser built-ins such as
window render coral, as in the screenshot.
Nested brackets are colored by level (plain, tan, green, coral, teal, gray). In the screenshot all brackets are plain text. To match that, set "editor.bracketPairColorization.enabled": false.
Editing the theme
build_theme.py generates themes/green-barrette-color-theme.json from one palette dictionary. Change a color there, then rebuild:
python3 build_theme.py # rebuild the theme JSON
npx @vscode/vsce package --skip-license
To try changes without repackaging, open this folder in VS Code and press F5. That starts an Extension Development Host with the theme loaded.
Credits
The sampled palette is close to Vitesse Dark by Anthony Fu (MIT License). The regex, escape and error colors here are taken from Vitesse Dark.
