PaletteIDE
v2.0
New visual editor is live

Design your VS Code theme.
Visually.

Craft your VS Code theme in a live visual playground. Our engine auto-tunes contrast and maps 200+ UI variables for you.

Midnight NebulaLIVE
export function Theme() {
const accent = "#c084fc";
// Applies across 200+ UI variables
return render(theme);
}
Themes

You've tried both paths.

Wade through thousands of community themes that never quite fit, or spend hours wrestling with JSON. Neither gets you there.

Path A

Browse community themes

"vs code theme dark..."8,742
Default Dark+54M
Neon Dreams3.1k
Dracula Official7.8M
Barbie Glamour890
Oceanic Next2.4M
Retro Summer12k
Matrix Green456
Warm Rose32k
Chaos Mode78
Monokai Pro4.2M
One Dark Pro9.1M
Night Owl1.8M
Cobalt Burst2.1k
Solarized Light3.4M
Pastel Blur4.3k
Winter Is Coming2.9M
↓ 8,726 more results · still scrolling…
  • Thousands of themes to sift through
  • None match your exact taste
  • Many are outdated or unmaintained
  • Can't tweak just one aspect
Path B

Build it from scratch

settings.json
"editor.background":"#1e1e1e",
"editor.foreground":"#d4d4d4",
"editor.lineHighlightBackground":"#2a2d2e",
"editor.selectionBackground":"#264f78",
"editorCursor.foreground":"#aeafad",
"editorLineNumber.foreground":"#858585",
"editorLineNumber.activeForeground":"#c6c6c6",
"editorIndentGuide.background":"#404040",
"editorBracketMatch.background":"#0064001a",
"activityBar.background":"#333333",
"activityBar.foreground":"#ffffff",
"activityBarBadge.background":"#007acc",
"sideBar.background":"#252526",
"sideBar.foreground":"#cccccc",
"sideBarTitle.foreground":"#bbbbbb",
"sideBarSectionHeader.background":"#0000001a",
"tab.activeBackground":"#1e1e1e",
"tab.activeForeground":"#ffffff",
"tab.inactiveBackground":"#2d2d2d",
"tab.inactiveForeground":"#ffffff80",
"tab.border":"#252526",
"statusBar.background":"#007acc",
"statusBar.foreground":"#ffffff",
"titleBar.activeBackground":"#3c3c3c",
"titleBar.activeForeground":"#cccccc",
"panel.background":"#1e1e1e",
"panel.border":"#80808059",
"terminal.background":"#1e1e1e",
"terminal.foreground":"#cccccc",
"button.background":"#0e639c",
"button.hoverBackground":"#1177bb",
"input.background":"#3c3c3c",
"input.foreground":"#cccccc",
"dropdown.background":"#3c3c3c",
"list.activeSelectionBackground":"#094771",
"list.hoverBackground":"#2a2d2e",
"scrollbarSlider.background":"#79797966",
↓ 163 more variables · still scrolling…
  • 200+ UI variables to tune by hand
  • No built-in contrast validation
  • Reload VS Code for every change
  • Hours lost in the JSON maze
There's a better way

Three ways we make it effortless.

Step 1 · Save time

Hours saved, in a single click.

  • 30+ curated palettes, always growing
  • Applied in under a second
  • Tweak any aspect if you want to
Palette Library
30+ themes
Midnight Nebula
Editor’s Choice
Applied
Tokyo Street
Trending
Forest Mist
Calm
Warm Rose
Cozy
Step 2 · Live preview

Instant live preview.

  • Zero-latency updates
  • See full UI, not just code
  • Export your .vsix when it feels right
Theme Editor
Accent Color
#8b5cf6
Background
#0d0d12
VS Code Preview
index.tsx
import { useState } from 'react';
export function App() {
const [count, setCount] = useState(0);
return (
<div className="app">
<h1>Hello World</h1>
</div>
);
}
Step 3 · Design standard

Flawless contrast and color harmony.

  • WCAG AAA contrast, guaranteed
  • Analogous color theory enforced
  • Consistent across all 200+ variables
ContrastWCAG AAA
Text on background14.8:1
UI element9.2:1
Accent on surface7.3:1
HarmonyAnalogous
818
a78
c08
d94
ec4
Even spacing across the hue spectrum

Engineered with industry-leading technologies

TypeScript
React
Tailwind CSS
WebAssembly
VS Code API

Build your dream workspace.

Join thousands of developers who have already upgraded their coding experience. Start crafting your perfect IDE theme today.