VSC Design Lab

August 16, 2025 · View on GitHub

Design & preview VS Code themes with a two-panel UI, live updates, global search, and import/export (JSON/JSONC/VSIX/CSS).

Features

  • Two-panel UI: Left = Controls (tabs: Colors, Tokens, Semantic). Right = rich Live Preview (title bar, activity bar, side bar, editor tabs, gutter, status bar).
  • Colors: Categorized from template; swatches, #RRGGBBAA text, alpha slider, per-item descriptions; Locate in Preview outline + pulse.
  • Tokens: Flat textMateRules editor by scope, foreground, fontStyle (bold/italic/underline/strikethrough). Add new rules.
  • Semantic: Flat map; edit foreground + fontStyle; create new semantic tokens; writes with enabled: true.
  • Search: Global filter instantly narrows colors/tokens/semantic entries.
  • Import: Use Current, Blank, Theme JSON/JSONC (JSONC safely parsed), VSIX (extracts themes/*.json).
  • Export: JSON (theme), CSS variables (--vscode-<color-id>), VSIX (minimal, runnable folder for vsce package).
  • Live preview: Writes to:
    • workbench.colorCustomizations
    • editor.tokenColorCustomizations (textMateRules)
    • editor.semanticTokenColorCustomizations (enabled: true; rules: {...})
  • Scope: Workspace vs User via designLab.preview.applyToWorkspace (default false = User).

Commands

  • VSC Design Lab: Open — designLab.open
  • VSC Design Lab: Import... — designLab.import
  • VSC Design Lab: Export as JSON — designLab.export.json
  • VSC Design Lab: Export as CSS — designLab.export.css
  • VSC Design Lab: Export as VSIX — designLab.export.vsix
  • VSC Design Lab: Use Current Theme — designLab.useCurrent
  • VSC Design Lab: Create Blank Theme — designLab.blank

Setting

designLab.preview.applyToWorkspace (boolean, default false)

  • false: write preview to User settings.
  • true: write preview to Workspace settings.

Import Details

  • Use Current: Reads current workbench.colorCustomizations, editor.tokenColorCustomizations.textMateRules, and editor.semanticTokenColorCustomizations.rules.
  • JSON/JSONC: Parses .json or .jsonc and normalizes fields:
    • colors → workbench colors
    • tokenColors (array) → textMate rules
    • semanticTokenColors (object) → semantic rules (if semanticHighlighting: true), otherwise editor.semanticTokenColorCustomizations.rules
  • VSIX: Unzips and loads the first themes/*.json.

Export Details

JSON Theme

Writes:

{
"$schema": "vscode://schemas/color-theme",
"name": "<Theme Name>",
"type": "dark|light",
"colors": { ... },
"tokenColors": [ ... ],
"semanticHighlighting": true,
"semanticTokenColors": { ... }
}

CSS Variables

Emits :root { --vscode-<dot.replaced.by-dash>: <value>; } for every color key.

VSIX (folder)

Generates a minimal extension folder:

package.json
themes/theme.json

Run vsce package inside that folder to produce a .vsix.

Development

Requirements: Node 18+ (Node 24 is fine), VS Code ^1.103.0.

npm i
npm run compile
# F5 to launch Extension Development Host

Common scripts:

npm run watch    # rebuild on change
npm run build    # one-shot build

Troubleshooting

  • Activation failed: “Cannot find module './impl/format'”
    • Fix: externalize jsonc-parser in the esbuild command (--external:jsonc-parser), and ensure you don’t depend on the vscode NPM package at runtime (remove it).
  • Bundler: “Could not resolve 'vscode'”
    • Fix: add --external:vscode to esbuild. VS Code provides this module at runtime.
  • Preview not sticking where you expect
    • Check designLab.preview.applyToWorkspace (User vs Workspace scope).

License

MIT