← Back to Tools
VS Code & Cursor Color Generator
Pick a primary color and get a complete color scheme for your editor. Works with both VS Code and Cursor since they use the same settings format.
Pick Your Primary Color
Quick presets:
Preview
my-project
Explorer
src/
index.ts
app.tsx
index.ts
app.tsx
const greeting = "Hello";
mainTypeScriptUTF-8
Generated Settings
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#F5C518",
"titleBar.activeForeground": "#1a1a1a",
"titleBar.inactiveBackground": "#C19700",
"titleBar.inactiveForeground": "#1a1a1a",
"activityBar.background": "#C19700",
"activityBar.foreground": "#1a1a1a",
"activityBar.inactiveForeground": "#4a4a4a",
"statusBar.background": "#8E6F00",
"statusBar.foreground": "#1a1a1a",
"sideBar.background": "#F3E5B3",
"sideBarSectionHeader.background": "#F5C518",
"sideBarSectionHeader.foreground": "#1a1a1a",
"tab.activeBackground": "#F5C518",
"tab.activeForeground": "#1a1a1a"
}
}How to Use
- Pick a primary accent color using the color picker or choose a preset
- Copy the generated JSON configuration
- In VS Code or Cursor, press
Cmd+Shift+P(Mac) orCtrl+Shift+P(Windows) - Search for "Open Workspace Settings (JSON)"
- Paste the configuration and save
Pro Tips
- Per-project colors: Use Workspace Settings for project-specific themes
- Global colors: Use User Settings if you want the same color everywhere
- Color coding: Use yellow for frontend, blue for backend, green for APIs, etc.