VS Code theme generator

Generate a VS Code color theme from any five-role color scheme. The export is a settings.json snippet — workbench colors (activity bar, title bar, status bar, editor), a full 16-color integrated-terminal palette, and basic token colors — so you can restyle your editor without installing a theme extension.

The scheme’s primary color drives the workbench chrome, the accent takes the status bar, and the six ANSI hues keep their conventional meaning (red still reads as an error) while borrowing the scheme’s saturation and lightness.

Open the Studio → make your own free · no signup · exports as colorschemes-theme.jsonc

How to install

  1. Open the Studio, pick or generate a scheme, and switch to the Themes tab
  2. Select VS Code and copy the snippet
  3. In VS Code, open Settings (JSON) via the Command Palette (⌘⇧P → "Preferences: Open User Settings (JSON)")
  4. Paste the keys into your settings.json and save — the colors apply instantly

Example VS Code themes

Generated from curated schemes — open one in the Studio to tweak it, or copy the export as-is.

// Paste into VS Code settings.json
  "workbench.colorCustomizations": {
    "activityBar.background": "#1e5631",
    "activityBar.foreground": "#f6f8f4",
    "titleBar.activeBackground": "#1e5631",
    "titleBar.activeForeground": "#f6f8f4",
    "statusBar.background": "#d9a441",
    "statusBar.foreground": "#f6f8f4",
    "editor.background": "#f6f8f4",
    "editor.foreground": "#16241a",
    "terminal.background": "#f6f8f4",
    "terminal.foreground": "#16241a",
    "terminal.ansiBlack": "#1d2f22",
    "terminal.ansiBrightBlack": "#527a5d",
    "terminal.ansiRed": "#a63a3a",
    "terminal.ansiBrightRed": "#c76060",
    "terminal.ansiGreen": "#1e5631",
    "terminal.ansiBrightGreen": "#318c4f",
    "terminal.ansiYellow": "#d9a441",
    "terminal.ansiBrightYellow": "#e5c07b",
    "terminal.ansiBlue": "#3a67a6",
    "terminal.ansiBrightBlue": "#608bc7",
    "terminal.ansiMagenta": "#a63aa6",
    "terminal.ansiBrightMagenta": "#c760c7",
    "terminal.ansiCyan": "#3aa6a6",
    "terminal.ansiBrightCyan": "#60c7c7",
    "terminal.ansiWhite": "#dbe2d4",
    "terminal.ansiBrightWhite": "#f7f8f6"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#527a5d",
    "keywords": "#1e5631",
    "strings": "#1e5631",
    "functions": "#3a67a6",
    "numbers": "#d9a441"
  }
// Paste into VS Code settings.json
  "workbench.colorCustomizations": {
    "activityBar.background": "#47546a",
    "activityBar.foreground": "#f8f9fb",
    "titleBar.activeBackground": "#47546a",
    "titleBar.activeForeground": "#f8f9fb",
    "statusBar.background": "#d98e6a",
    "statusBar.foreground": "#f8f9fb",
    "editor.background": "#f8f9fb",
    "editor.foreground": "#1b2330",
    "terminal.background": "#f8f9fb",
    "terminal.foreground": "#1b2330",
    "terminal.ansiBlack": "#1d2430",
    "terminal.ansiBrightBlack": "#52617a",
    "terminal.ansiRed": "#d98e6a",
    "terminal.ansiBrightRed": "#e7b8a2",
    "terminal.ansiGreen": "#3ea33e",
    "terminal.ansiBrightGreen": "#64c464",
    "terminal.ansiYellow": "#a39a3e",
    "terminal.ansiBrightYellow": "#c4bc64",
    "terminal.ansiBlue": "#47546a",
    "terminal.ansiBrightBlue": "#647696",
    "terminal.ansiMagenta": "#a33ea3",
    "terminal.ansiBrightMagenta": "#c464c4",
    "terminal.ansiCyan": "#3ea3a3",
    "terminal.ansiBrightCyan": "#64c4c4",
    "terminal.ansiWhite": "#d4d9e2",
    "terminal.ansiBrightWhite": "#f6f7f8"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#52617a",
    "keywords": "#47546a",
    "strings": "#3ea33e",
    "functions": "#47546a",
    "numbers": "#d98e6a"
  }

Also export for

Omarchy · Ghostty · Base16 · Windows Terminal · iTerm2 · Alacritty · Kitty · Xresources · Slack