VS Code hides ~900 workbench colors behind cryptic token names in settings.json. Theme Builder gives you a graphical editor instead — pick an area, click an element, change its colour, and watch it preview live in your real editor.
Stop hunting ~900 tokens by name.
Theme Builder organises every workbench colour into ~30 readable areas. Each area shows a labelled mockup with all states — default, hover, active, focused, disabled, error — rendered side by side, so you never have to trigger a state just to style it. Nothing is written to settings.json until you Apply.
Choose a surface — Status Bar, Notifications, Form Controls — from the sidebar. Its mockup shows every visual state at once.
Click anything in the mockup and the inspector jumps to the exact tokens behind it. Edit with a colour picker, hex input, or alpha slider.
Changes preview live in your real editor. Apply commits them, Cancel rolls back — your settings stay untouched until you choose.
Every workbench colour, grouped into surfaces you can actually reason about — no more scrolling a flat list of token names.
Click an element in a mockup and the inspector reveals the precise tokens that drive its colour.
Edits preview instantly and converge in your editor on Apply. settings.json is never touched until you commit.
Overrides nest under [<your theme>], so your tweaks layer cleanly on top without polluting other themes.
A colour-picker chip, hex field with escape-to-revert, an alpha slider, and a one-click reset on every row.
Export your customizations as a VS Code colour-theme file, or import one — with interactive conflict resolution.
No paywall, no account. Install and theme.
MIT-licensed. Read the source, file an issue, send a PR.
Workbench colours only — your syntax highlighting is left alone.
Theme Builder is built and maintained by Gabbatron Pty Ltd, an independent Australian software company (ABN 98 163 064 524). Questions or bug reports? Write to support.vscode.builder@gabbatron.com.au or open an issue.