How I Built the Cursor Color Theme for VS Code

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:

• Personal preference. I wanted Cursor's exact aesthetic in VS Code without switching editors for every task.
• Learning the architecture. VS Code themes are deceptively deep. I wanted to understand how the extension system works from the ground up.
• Community contribution. If I was going to build it anyway, I might as well publish it so others who feel the same way don't have to.
• Eye strain optimization. The right color palette significantly reduces fatigue during long coding sessions. This was an opportunity to tune it exactly.

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 the contributes.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:

• Comments — Muted gray. They should recede, not compete with code.
• Strings — Soft purple. Visually distinct, easy to spot string boundaries.
• Keywords — Teal/cyan. Control flow keywords (if, return, const) need to stand out.
• Functions — Orange/amber. Function names are the most important semantic unit in code.
• Classes & Types — Blue. Type information should be visible but not dominant.
• Numbers & Constants — Light green. Literal values are easy to scan at a glance.

{
  "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:

• Open files in 6-8 different languages (JS, TS, Python, Go, CSS, JSON, Markdown, Shell)
• Test every major UI surface: explorer, search, source control, extensions panel, terminal
• Check light-colored UI elements aren't invisible against similar backgrounds
• Use the Developer: Inspect Editor Tokens and Scopes command to verify scope targeting
• Test with different file types in split panes to catch contrast issues

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:

• Start with a base theme and fork it. VS Code has a few first-party dark themes. Forking one and modifying gives you complete coverage from day one.
• Use the Color Theme editor. VS Code has a built-in GUI for tweaking theme colors in real time. Much faster than edit → save → reload loops.
• Test contrast ratios early. Low-contrast combinations are hard to catch without deliberately checking, and fixing them late means reworking other decisions you built on top.

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.