Theme Studio

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)

Version

• 0.0.3: Added workspace label + quick picks + removed color swatch circles

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

1. Install dependencies and compile:

npm install
npm run compile

2. Open this folder in VS Code.
3. Press F5 to launch the Extension Development Host.
4. In the Extension Development Host window, run Theme Studio: Open or Theme Studio: Open in Browser.
5. Adjust colors and click Save Theme.