Build a Custom VS Code Color Theme — Dark Gold and Light Clean Editions

Two Types of Colors in a VS Code Theme

A VS Code theme controls two separate sets of colors:

• ✓UI / Workbench colors — the editor background, sidebar, tabs, status bar, activity bar, terminal
• ✓Syntax token colors — how keywords, strings, comments, functions, and variables are highlighted in code

Both live in a single JSON file.

The Theme File Structure

{
  "name": "YFIN Dark Gold",
  "type": "dark",

  "colors": {
    "editor.background": "#0D0D0D",
    "editor.foreground": "#E8E8E8",
    "statusBar.background": "#B8860B",
    "sideBar.background": "#111111"
  },

  "tokenColors": [
    {
      "name": "Keywords",
      "scope": ["keyword", "keyword.control"],
      "settings": {
        "foreground": "#B8860B",
        "fontStyle": "bold"
      }
    }
  ]
}

The Most Important UI Color Keys

• ✓editor.background — the canvas where you write code
• ✓editor.lineHighlightBackground — current line highlight
• ✓statusBar.background — the bottom bar (ours is gold!)
• ✓activityBar.background — the left icon rail
• ✓tab.activeBackground — the currently open file tab

Key Token Scopes for Syntax Highlighting

• ✓keyword — if, else, return, const, let
• ✓string — "text values"
• ✓comment — // comments and /* blocks */
• ✓entity.name.function — function names
• ✓constant.numeric — numbers like 42, 3.14
• ✓entity.name.tag — HTML tag names

Inspect Any Token's Scope

Press Ctrl+Shift+P → Developer: Inspect Editor Tokens and Scopes → click any word in your code. VS Code shows you exactly which scope that word uses, so you can target it precisely in your theme.

This is a preview. The full ebook includes the complete color palette for both themes (13 colors each), all token colors, and the full JSON files ready to copy.