Theme Lab

August 11, 2025 · View on GitHub

Design, preview, and export Visual Studio Code color themes with live preview and token/semantic editing.

Features

  • Two-panel UI: controls on the left, extensive live preview on the right (title bar, breadcrumbs, sidebar, editor tabs, gutter/active line, selection, cursor, Problems panel, terminal, notifications, status bar).
  • Colors: pick a Category, then choose from a scrollable key list with color swatches (no dropdown). Full #RRGGBBAA support via picker, alpha slider, and text input.
  • Tokens (TextMate): see a merged list of token rules (template + your current/custom rules). Edit scope, foreground, and fontStyle (bold/italic/underline/strikethrough). Create new rules.
  • Semantic tokens: create a full list of types + modifiers and assign them to a scope. edit foreground and fontStyle.
  • Import: Use Current, Blank, Theme JSON, or VSIX. Imports include existing workspace overrides for workbench.colorCustomizations, editor.tokenColorCustomizations, and editor.semanticTokenColorCustomizations.
  • Export: JSON theme, CSS variables, or minimal VSIX package.
  • Navigation: “Locate in Preview” scrolls to and highlights the element you’re editing.
  • CSP-safe & offline: the UI template is embedded (no fetch), so the panel loads reliably.

Commands

  • Theme Lab: Open (theme-lab.open)
  • Theme Lab: Import VSIX (theme-lab.importVsix)
  • Theme Lab: Import Theme JSON (theme-lab.importJson)
  • Theme Lab: Start Blank Theme (theme-lab.startBlank)
  • Theme Lab: Use Current Theme (theme-lab.useCurrent)

Settings

  • theme-lab.preview.applyToWorkspace (boolean, default: true)
    • When true, live preview writes to workspace settings. When false, writes to user settings.

Quick start

  1. Run "Theme Lab: Open"
  2. Choose a start mode (Use Current, Blank, Import JSON, Import VSIX)
  3. Pick a Category → click a color key → tweak color/alpha → Apply. Use Tokens or Semantic tabs to style code, then Locate in Preview to see where it applies.
  4. Export as JSON, CSS, or VSIX from the toolbar when ready

Notes

  • Color inputs support #RRGGBB and #RRGGBBAA. The Alpha slider/number edits the AA component.
  • Template: if assets/template.jsonc (or template.json) is present, it seeds categories, keys, and descriptions. If absent or invalid, a minimal fallback is used.

Export formats

  • JSON: Standard VS Code theme JSON with $schema, colors, tokenColors, and semanticTokenColors.
  • CSS: A :root { --themelab-<key>: <value>; } variables file derived from workbench colors.
  • VSIX: A minimal, self-contained theme extension zip containing package.json and themes/theme.json.

Development

Prerequisites

  • Node.js and npm
  • VS Code

Scripts

  • Build once: npm run compile
  • Watch mode: npm run watch
  • Package VSIX: npm run package

Debugging

  • Use “Run and Debug” → “Run Extension” to launch an Extension Development Host and test live.

License

MIT. See LICENSE.txt.

Acknowledgements

  • jszip (VSIX packaging)
  • jsonc-parser (template parsing)