How to Customise Your VS Code Theme

You don't have to live with a theme exactly as someone else designed it. VS Code has three layers of theme customisation — from a quick one-line colour fix to building something entirely your own. Here's how each one works.

Level 1 — Quick override in settings.json

The fastest way. Open your VS Code settings (Ctrl+Shift+P → Preferences: Open User Settings (JSON)) and add a workbench.colorCustomizations block:

{
  "workbench.colorCustomizations": {
    "editor.background": "#0d0d0d",
    "sideBar.background": "#111111",
    "statusBar.background": "#863bff",
    "activityBar.background": "#0d0d0d"
  }
}

Changes apply instantly. This overrides the active theme without replacing it — so you keep all the syntax highlighting and only change what you want.

Level 2 — Customise syntax token colours

To change how code looks inside the editor, use editor.tokenColorCustomizations:

{
  "editor.tokenColorCustomizations": {
    "comments": "#6a9955",
    "keywords": "#863bff",
    "strings": "#ce9178",
    "functions": "#dcdcaa",
    "variables": "#9cdcfe"
  }
}

For finer control, use the textMateRules key to target specific scopes:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "foreground": "#6a9955",
          "fontStyle": "italic"
        }
      }
    ]
  }
}

Level 3 — Build a full theme with ThemeLab

If you find yourself accumulating a lot of overrides, you've effectively written a theme. At that point it's cleaner to design one properly and export a standalone JSON file.

ThemeLab makes this visual — you see the full VS Code shell react to every colour change in real time, so you're not guessing how tokens will look, you're seeing exactly what the editor looks like as you design.

1. Open ThemeLab in the browser
2. Adjust colours across UI chrome and syntax tokens
3. Export theme.json
4. Place it in ~/.vscode/extensions/my-theme/ with a package.json
5. Select it from Preferences: Color Theme

Useful token references

• editor.background — main editor canvas
• editor.selectionBackground — highlighted selection colour
• editor.lineHighlightBackground — current line gutter
• editorCursor.foreground — cursor colour
• sideBar.background — file explorer panel
• tab.activeBackground — currently open tab
• statusBar.background — bottom info bar
• terminal.background — integrated terminal

Built by Joe Hunter — see the full guide to creating a VS Code theme for more on the token system.