Theme Studio is a VS Code extension with a webview UI for creating workspace themes. It provides color token editing with live preview and saves variant-specific theme files. You need an open workspace folder so the extension can write into themes/.
Commands
Theme Studio: Open (webview inside VS Code)
Theme Studio: Open in Browser (hosts the UI on localhost and opens your default browser)
Current capabilities
Light/Dark variant toggle
Randomize palette (seeded HSL generator)
Touch mode toggle for larger controls
Live VS Code-style mock preview panel
Simple/advanced editor views with search and collapsible groups
JSON import/export for themes
Editable color token groups: Editor, Sidebar, Activity Bar, Status Bar, Title Bar, Button, Tabs, List Selection
Save action writes themes/custom-color-theme-dark.json and themes/custom-color-theme-light.json
Save also updates workspace setting workbench.colorCustomizations
Quick start
Install dependencies and compile:
npm install
npm run compile
Open this folder in VS Code.
Press F5 to launch the Extension Development Host.
In the Extension Development Host window, run Theme Studio: Open or Theme Studio: Open in Browser.
