How to Create a VS Code Theme with Live Preview(No Extension Needed)

Why the old VS Code theme workflow is broken

The official VS Code theme workflow expects you to scaffold an extension, hand-edit a JSON file with hundreds of color tokens, hit F5 to launch an Extension Development Host, and alt-tab between two windows every time you adjust a value. Even experienced theme authors spend 60–70% of their time on mechanics — reloading, diffing JSON, chasing accidental regressions in syntax tokens — instead of on color.

The underlying problem is that VS Code has no built-in live preview. Every change means a round-trip through the JSON file and the extension host. That friction is why most custom themes never ship past the "first attempt" stage.

The live-preview alternative: design in the browser

The idea is simple: simulate the VS Code UI in a web page, give it a real-time color editor, and let you export the finished JSON when you are done. No extension, no reload cycle, no packaging step until the theme is ready to install.

A browser-based VS Code theme editor like PaletteIDE renders the editor chrome, the sidebar, the terminal, and sample source code using the same token names the real VS Code theme engine consumes — so every color you touch updates the preview instantly across all 200+ UI variables.

Step 1 — Pick a starting palette

You rarely want to start from an empty palette. Pick a preset that feels roughly in the direction you want (dark indigo, warm tokyo, oceanic blue, monochrome minimal) and iterate from there. A good starting palette gives you a sensible contrast baseline so you can focus on the 10–15 colors that actually define the theme's personality, not the 200 that just need to be "reasonable".

Step 2 — Tune the accent and surface colors

Start with two decisions:

• Surface (background): usually a single hue repeated at three to four lightness levels — editor, sidebar, activity bar, status bar. Consistency here is what makes an IDE palette feel cohesive.
• Accent: the color that shows up on the active tab bar, focus rings, and selected sidebar items. One strong accent beats three mediocre ones.

With live preview every shift to those two colors cascades immediately — you can A/B test variants in seconds instead of minutes.

Step 3 — Design the syntax tokens

This is where most themes win or lose. A palette editor that shows you real code samples — keywords, functions, strings, comments, punctuation, variables — while you edit is essential. You want to watch how your choices interact with each other, not commit to them one JSON field at a time.

A rough heuristic: keywords get the most saturated color, functions get a contrasting hue, strings go warm, comments go muted, and punctuation stays near-neutral. Live preview lets you verify this in under a minute instead of a reload cycle.

Step 4 — Check contrast automatically

Most custom themes fail at accessibility. Text-on-background contrast below WCAG AA (4.5:1 for normal text) is painful to read for 8+ hours a day. A good browser-based editor flags low-contrast pairings as you work instead of waiting until users complain.

PaletteIDE specifically auto-tunes borderline contrast pairs and highlights the ones that need manual attention — so you finish a theme knowing it passes, not hoping.

Step 5 — Export the theme JSON

When the preview looks right, click the Download button in the top-right corner. A standard VS Code color-theme JSON file downloads to your machine — the same format you would hand-author in a theme extension.

There are four ways to use the downloaded JSON, in ascending order of effort. Pick the one that fits your situation.

Option A — Paste into settings.json (fastest, personal use)

For testing a theme on your own machine without packaging anything, VS Code lets you override colors directly in settings.json. Open the command palette and run Preferences: Open User Settings (JSON), then paste the contents of the exported file in two places:

{
  // ...your existing settings...

  // Paste the "colors" object from the downloaded JSON here:
  "workbench.colorCustomizations": {
    "editor.background": "#0d0d12",
    "editor.foreground": "#e5e5e5",
    "activityBar.background": "#22222e",
    "sideBar.background": "#1a1a24",
    "tab.activeBorder": "#c084fc",
    "focusBorder": "#c084fc"
    // ...
  },

  // Paste the "tokenColors" array here, under textMateRules:
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      { "scope": "keyword", "settings": { "foreground": "#c084fc" } },
      { "scope": "string",  "settings": { "foreground": "#38bdf8" } },
      { "scope": "comment", "settings": { "foreground": "#64748b", "fontStyle": "italic" } }
    ]
  }
}

Changes apply instantly, no restart needed. Caveat: this is an override layer on top of whatever theme you currently have active — it won't show up in the Color Theme picker and you can't share it with teammates. Great for testing; use one of the options below for anything permanent or shareable.

Option B — Local extension folder (real theme, daily use)

Create a folder at ~/.vscode/extensions/midnight-nebula-1.0.0/ (use your theme's name). Inside, put two things:

midnight-nebula-1.0.0/
├── package.json
└── themes/
    └── midnight-nebula-color-theme.json  ← the file you downloaded

A minimal package.json looks like this:

{
  "name": "midnight-nebula",
  "displayName": "Midnight Nebula",
  "version": "1.0.0",
  "publisher": "you",
  "engines": { "vscode": "^1.74.0" },
  "contributes": {
    "themes": [
      {
        "label": "Midnight Nebula",
        "uiTheme": "vs-dark",
        "path": "./themes/midnight-nebula-color-theme.json"
      }
    ]
  }
}

Restart VS Code, open the command palette (⌘⇧P / Ctrl+Shift+P), and run Preferences: Color Theme. Your theme appears in the list.

Option C — Package as a .vsix (shareable with a team)

Install the VS Code extension CLI once: npm install -g @vscode/vsce. From your extension folder (same structure as Option B), run vsce package. It produces a midnight-nebula-1.0.0.vsix file you can share over Slack, attach to a GitHub release, or install locally with code --install-extension midnight-nebula-1.0.0.vsix.

Option D — Publish to the VS Code Marketplace (public)

Create a publisher account at marketplace.visualstudio.com/manage, grab a Personal Access Token from Azure DevOps, then run vsce publish. Your theme goes live and becomes installable by anyone on earth.

Why this beats the two paths most developers take

Before building a theme in a live-preview editor, most developers try one of two paths — and both fall short.

Path A — Browsing community themes

The VS Code Marketplace has thousands of themes, which sounds helpful until you actually need one. You scroll for an hour, bookmark five candidates, and none of them match the exact look you had in mind. Some are unmaintained. The one that is 80% right uses a red you hate on active tabs, and you can't tweak just that one aspect without forking the extension and republishing.

The live-preview approach skips the search entirely: you start with a preset that's roughly in the right direction and iterate on the one color you care about — no forking, no waiting on a maintainer, no compromise.

Path B — Building from scratch in settings.json

The "I'll just do it myself" path runs into three hard walls:

• 200+ UI variables to tune by hand. VS Code exposes north of two hundred color tokens across the editor, sidebar, tabs, terminal, status bar, and widgets. Even finding the right token name takes a doc search.
• No built-in contrast validation. You'll ship a theme that fails WCAG AA on its most-read surface and not find out until someone complains on GitHub.
• Reload VS Code for every change. The round-trip between editing JSON and seeing the result is what turns an afternoon project into a week.

A live-preview editor collapses all three walls into one feedback loop: every color change renders instantly across the whole mock IDE, contrast is audited as you type, and you never touch a reload button. Hours of JSON wrangling become fifteen minutes of design.

FAQ