The Online VS Code Theme Editor That Actually Shows You VS Code

Most VS Code theme tools drop you into a wall of JSON tokens and expect you to imagine how they'll look. ThemeLab does the opposite — it renders a live, pixel-accurate simulation of the VS Code interface directly in your browser.

Change a colour, see it update across the entire editor shell instantly. When you're happy, export a valid VS Code .json theme file and install it in seconds.

Open ThemeLab →

What makes it different

🖥 Real VS Code simulation

Activity bar, sidebar, tabs, editor, status bar — all reactive to your theme tokens.

⚡ Instant live preview

Every change is applied immediately via CSS variables. No build step, no refresh.

📦 Export valid JSON

Download a theme.json file that works as a proper VS Code extension theme.

🧠 Token-aware UI

Each control maps to a real VS Code theme token so you always know what you're editing.

Who built this?

ThemeLab is a project by Joe Hunter, a full-stack developer based in Spain. It started as a technical challenge — build something that looks and feels like VS Code, entirely in React, with no backend and no native code.

The result is a tool Joe actually uses when designing themes, and a demonstration of what's achievable with modern frontend engineering.

No install. No signup. No catch.

ThemeLab runs entirely in the browser. Open it, start designing, export when you're done. That's it.

Try it now →