VS CodeDev ToolsOpen Source

How I Built the Cursor Color Theme for VS Code

A detailed journey of creating a custom VS Code theme from scratch.

January 31, 20264 min readAlso on Medium ↗

I switched to Cursor a while back and immediately fell in love with the editor’s aesthetic — the dark background, the subtle blue accents, the way the UI felt modern without being distracting. Then I’d open VS Code for something and feel the visual whiplash. So I decided to fix it: build a theme that brings Cursor’s look into VS Code.

What I expected to be a weekend project turned into a deep dive into VS Code’s extension architecture, color token systems, and the surprisingly large surface area of “what counts as UI.” Here’s the full walkthrough.

Why Build a Theme?

Four reasons drove this:

Project Structure

A VS Code theme extension is simpler than most extensions — no TypeScript compilation, no activation logic. The core structure looks like this:

cursor-color-theme/
├── themes/
│   └── cursor-color-theme.json   # The actual color definitions
├── package.json                  # Extension manifest
├── README.md
└── images/
    └── preview.png               # Marketplace screenshot

The package.json is where VS Code learns about your extension. The critical part is thecontributes.themes field:

{
  "name": "cursor-color-theme",
  "displayName": "Cursor Color Theme",
  "description": "A dark VS Code theme inspired by the Cursor editor",
  "version": "1.0.0",
  "engines": { "vscode": "^1.80.0" },
  "categories": ["Themes"],
  "contributes": {
    "themes": [{
      "label": "Cursor Color Theme",
      "uiTheme": "vs-dark",
      "path": "./themes/cursor-color-theme.json"
    }]
  }
}

The Color Token System

This is where the real work lives. VS Code exposes hundreds of color tokens, and a good theme needs to handle all of them consistently. I ended up customizing over 100 tokens across several layers of the editor.

Editor Core

The base editor background, cursor color, line highlight, and selection colors. These are the most visible and most impactful. Getting the background right — dark enough for comfort but not so dark it looks like a void — took the most iteration.

"editor.background": "#0d1117",
"editor.foreground": "#c9d1d9",
"editor.lineHighlightBackground": "#161b22",
"editor.selectionBackground": "#264f78",
"editorCursor.foreground": "#58a6ff"

Workbench UI

Activity bar, sidebar, status bar, tabs, panels, and the title bar all need their own token sets. The goal was visual cohesion — everything should feel like it belongs to the same system, with subtle elevation differences between layers.

Terminal Colors

The terminal needs 16 ANSI colors (8 base + 8 bright variants). This is often overlooked in theme design, but getting the terminal colors right matters — especially if you spend a lot of time in the integrated terminal.

Syntax Highlighting

Syntax rules use TextMate grammar scopes. The goal was readable, meaningful differentiation without being visually noisy. Here’s how the major categories broke down:

{
  "scope": ["comment", "comment.block"],
  "settings": { "foreground": "#6e7681" }
},
{
  "scope": "string",
  "settings": { "foreground": "#a5d6ff" }
},
{
  "scope": ["keyword", "keyword.control"],
  "settings": { "foreground": "#ff7b72" }
},
{
  "scope": "entity.name.function",
  "settings": { "foreground": "#d2a8ff" }
}

Testing the Theme

VS Code makes extension testing straightforward. Press F5 in your extension project and it launches an Extension Development Host — a separate VS Code window with your extension loaded. No install needed.

My testing checklist:

The scope inspector is especially useful — you click on any token in the editor and it shows you exactly what TextMate scopes apply, making it easy to write precise targeting rules.

Publishing to the Marketplace

Publishing requires a few setup steps that the official docs walk through, but here’s the condensed version:

  1. Create a Microsoft Azure DevOps account (free)
  2. Generate a Personal Access Token with Marketplace publishing permissions
  3. Install vsce: npm install -g @vscode/vsce
  4. Create a publisher: vsce create-publisher your-name
  5. Package: vsce package → produces a .vsix file
  6. Publish: vsce publish

The first publish can take 5–10 minutes to appear in the Marketplace search. Updates typically propagate faster.

What I’d Do Differently

A few things I learned that would have saved time:

The theme is available on the VS Code Marketplace. If you use it, use Cursor, and miss it when you switch back to VS Code — this is for you.