Personalize Your Cursor/VS Code Theme with workbench.colorCustomizations

John Lindquist
Instructor

John Lindquist

Finding the perfect code editor theme is a myth. There are always small visual tweaks you'd like to make, but forking and maintaining an entire theme is overkill. This lesson shows you how to quickly and easily customize any theme directly within Cursor (or VS Code) using the workbench.colorCustomizations setting in your settings.json file.

The Problem:

  • No single theme perfectly matches everyone's preferences.
  • Minor visual annoyances (like search highlight colors) can impact focus and productivity.
  • Forking and publishing a theme for small changes is excessive.

The Solution: workbench.colorCustomizations

This setting allows you to override specific color values of your current theme without creating a new theme. You get fine-grained control over the editor's appearance.

How it Works:

  1. Open Settings (JSON): Use the command palette (Cmd/Ctrl + Shift + P) and search for "Preferences: Open User Settings (JSON)". It is best to create a new editor group to the right, and then open the json settings, so that you can visualize your changes.
  2. Add workbench.colorCustomizations: Within your settings.json, add a "workbench.colorCustomizations" object.
  3. Use Autocomplete: Inside this object, start typing "editor." and use Cursor's/VS Code's autocomplete to explore the available customization options. Examples include:
    • editor.findMatchBackground: Background color of search matches.
    • editor.findMatchHighlightBackground: Background color of the current search match.
    • editor.findMatchBorder: Border color of search matches.
    • editor.findMatchHighlightBorder: Border color of the current search match.
    • editor.background: Overall editor background color.
    • ...and many more!
  4. Set Color Values: Assign valid color values (hex codes, named colors, etc.) to the properties you want to change. You can even use transparency (alpha channel) with hex codes (e.g., #FF000022 for a semi-transparent red).
  5. Save and See the Changes: As soon as you save settings.json, the changes are applied live to your editor. Experiment with different colors until you find what works best.

Benefits:

  • Precise Control: Tweak individual elements of your theme without affecting others.
  • No Forking Needed: Make personal adjustments without the overhead of creating and managing a separate theme.
  • Live Updates: See your changes instantly as you edit the JSON.
  • Easy Experimentation: Try out different colors and settings quickly.

This lesson demonstrates a simple yet powerful way to personalize your coding environment, improving focus and making your editor truly your own. No need for extensive theme development – just targeted tweaks to make things just right.

Share with a coworker

Transcript

[00:00] My biggest gripe with every color theme is that when searching for text I can never actually tell which one of these is the focused match that is found. So if I hit enter you'll see that it'll change and I think it changed to this one. It's like an extremely subtle, yeah it's this light blue color. So when I hit escape I end up here. And it's just one of those visual things that I use a lot when jumping around a file.

[00:24] So it bothers me enough to learn that you can actually, in your settings, if you search for preferences and make sure you search for JSON, and I'm actually gonna open this to the right side. And it even bothers me I can't command enter from here to open this in the right pane. You have to create a new editor group to the right and then open it. Usually you can hit command enter when opening a file so command enter here would open it to the right pane, but I digress. If I come down and add some more settings, and I add a workbench, color customizations, I'll just paste in what I had from another editor, so that when I come over here and I search for argv, I get these nice white borders, I get a giant thick border with green showing my current match and once I hit enter It's blatantly obvious what's going on And you can tweak these and remove these as much as you want if you only want that one match to have that border Then you can remove that But you can come in here and tweak whatever you want, like even the main background color.

[01:20] If you have a theme you already like, say you really like the color red, and as soon as you hit save, everything will update. You're like, that's way too much red. You can add in some alpha and mute it down quite a bit. Obviously that's an extreme example, but with the autocomplete here you can essentially just find any of the things you want to tweak, just hit save and see where they show up, and just make all those tiny little changes to make the theme just the way you want it.