Why Editing VS Code Themes via JSON is a Nightmare (And How I Fixed It)

You want to change the comment color in your VS Code theme. Simple enough. So you open your settings.json, find editor.tokenColorCustomizations, and stare at a wall of scope strings that look like this:

"scope": [
  "comment",
  "punctuation.definition.comment",
  "string.comment"
],
"settings": {
  "foreground": "#6A9955"
}

Which one actually controls the color you're looking at? All of them? One of them? You change one, reload, squint at the screen. Nothing changed. You change another. Something shifted — but not the right thing. This is the reality of manual VS Code theme editing.

The actual problem with JSON theme editing

VS Code themes are defined by two massive token systems — workbench colors (the UI chrome: sidebar, tabs, title bar, status bar) and syntax token colors (keywords, strings, functions, comments in your code). A full theme can easily reference 400–600 individual color keys across both systems.

The official documentation lists them. But "listed" and "understandable" aren't the same thing. There's no visual map showing you which key corresponds to which pixel on screen. You're expected to memorize token names, guess scope selectors, and reload VS Code repeatedly just to see the effect of a single hex value change.

What developers actually want

Developers want to see what they're building. The same principle that makes browser DevTools powerful — live inspection, instant feedback — should apply to theme creation. Click a color. See it update everywhere it appears. No reloads. No guessing.

That's the entire premise behind ThemeLab. Instead of a JSON editor, you get a pixel-accurate simulation of the VS Code interface. Every panel, every color token, every syntax highlight — all live in the browser and all reactive to your changes in real time.

How ThemeLab fixes the problem

ThemeLab maps every color control directly to a named VS Code token. When you click Keyword and pick a new color, you instantly see it change across the simulated editor — in the code mock, the sidebar, the status bar. No ambiguity. No reload. No JSON hunting.

When you're done, you export a valid theme.json file — the same format VS Code extensions use — with a single click. Drop it into a VS Code extension folder and it works.

Why this matters beyond convenience

The JSON workflow isn't just inconvenient — it's a barrier that stops most developers from ever customising their theme at all. They pick Dracula or One Dark and stick with it forever, not because they love it, but because building something personal feels too painful.

ThemeLab removes that barrier entirely. If you can click a color wheel, you can build a theme.