How to Create a VS Code Theme

VS Code themes are more powerful than most developers realise. Under the hood, a theme is a single JSON file mapping named tokens to hex colours. Get the tokens right and you can control every pixel of the editor's appearance.

This guide walks through how the token system works and how to use ThemeLab to design one without touching JSON directly.

1. Understand the two token groups

VS Code themes split into two distinct systems:

Workbench colours

Control the UI chrome — sidebar, activity bar, tabs, status bar, panels. Keys like sideBar.background, activityBar.foreground.

TextMate / Semantic tokens

Control syntax highlighting inside the editor — keywords, strings, comments, functions. These use scope selectors like keyword.control.

2. A minimal theme JSON structure

{
  "name": "My Theme",
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "sideBar.background": "#252526",
    "activityBar.background": "#333333",
    "statusBar.background": "#007acc"
  },
  "tokenColors": [
    {
      "scope": "comment",
      "settings": { "foreground": "#6a9955" }
    },
    {
      "scope": "keyword",
      "settings": { "foreground": "#569cd6", "fontStyle": "bold" }
    }
  ]
}

3. Key token groups to know

  1. Editor surface: editor.background, editor.foreground, editor.lineHighlightBackground
  2. Sidebar + explorer: sideBar.background, sideBarTitle.foreground
  3. Tabs: tab.activeBackground, tab.inactiveBackground, tab.activeForeground
  4. Activity bar: activityBar.background, activityBarBadge.background
  5. Status bar: statusBar.background, statusBar.foreground
  6. Syntax — comments: comment, comment.block
  7. Syntax — keywords: keyword.control, storage.type
  8. Syntax — strings: string.quoted

4. Design visually with ThemeLab

Instead of editing JSON and reloading VS Code to see changes, ThemeLab renders a full VS Code simulation in the browser. Pick colours, see the result instantly across the entire UI, then export the finished JSON in one click.

Design your theme in ThemeLab →

5. Install your theme in VS Code

  1. Open VS Code → Ctrl+Shift+P → Preferences: Open Settings (JSON)
  2. Add "workbench.colorCustomizations" with your tokens — or
  3. Place your exported JSON in ~/.vscode/extensions/my-theme/ with a valid package.json
  4. Reload VS Code and select your theme from Preferences: Color Theme

Built by a developer, for developers

ThemeLab was built by Joe Hunter as a demonstration of what modern React can do — a fully reactive VS Code simulation with zero native dependencies. If you're interested in working with Joe, his portfolio is at joehunter.es.