How To Change Colors In Visual Studio Code?

By changing workbench.colorCustomizations object in settings.json

There are hundreds of color properties in VSCode you can modify to create your own theme.

But knowing just a few important ones is all you need to quickly paint VSCode into a favorite theme.

First, you might want to check out this How to change VSCode Theme and colors video tutorial:

Here's a quick overview of VScode colors covered in this tutorial:

• Where do you enter theme colors in VSCode?
• How do you change VSCode editor background color?
• How to change background color of text selection
• How to change regular text / font color

How To Edit Colors? #

Everything you need to change theme colors in VSCode is in settings.json. This tutorial will show you the fastest way to change most prominent theme colors in VS Code.

You can learn how to open VSCode settings.json here. This is the file you will enter your VSCode theme color settings into, under workbench.colorCustomizations property (search for it in settings.json).

If your settings.json file is blank and this property doesn't exist, add it yourself as follows:

{
  "workbench.colorCustomizations": {
    "selection.background": "#0000FF"
  }
}

(Here we set background color of currently selected text to solid blue.)

To change VSCode colors you need to edit settings.json file, one color property at a time. But it isn't always obvious. Which property refers to the color of what exactly? In the remainder of this "How to change your VSCode color theme" tutorial, we'll take a look at the most important colors.

How To Change Background Color #

In this example I changed VS Code's edtior background color to magenta:

In Visual Studio Code editor's background color is set with editor.background property:

{
  "workbench.colorCustomizations": {
    "editor.background": "#FF00FF"
  }
}

This will also change background color of Current Theme in VSCode, by overwriting its settings. So you can have a hybrid of a selected theme and your own colors.

I generally wouldn't change vscode's editor background color to magenta. But while working on this example I also noticed that it changes color of the current tab.

So I only used an unnaturally bright color as an example to show you how it also changes the background color of the tab of the currently opened file as well.

How To Change Background Color of Text Selection #

The first color I always change is the color of current text selection. I think it should always be a solid blue. Even in drastically different VSCode themes, I think it should be blue.

{
  "workbench.colorCustomizations": {
    "selection.background": "#0000FF"
  }
}

Here's what blue selection looks like:

We are used for blue to be the standard color for currently selected text because that's how it's originally implemented on Mac and Windows.

How To Change VSCode Terminal Background Color#

To change background color of Terminal in VSCode, it's the same exact properties you used to change your editor's background color. So basically, you've already done it.

Here are the properties you need to edit to change your Visual Studio Code's Terminal background colors:

{
  "workbench.colorCustomizations": {
    "editor.background": "#111111",
    "editor.selectionBackground": "#0000FF"
  }
}

These are the properties that will change background color and text selection background in both your VSCode's Terminal and VS Code editor.

How To Change Regular Font Color#

Unless another component overrides it, you can set text color in VSCode by changing the editor.foreground property in workbench.colorCustomizations JSON object:

Here because the color of my multi-line and single-line comments isn't set, the text inside the comments is set to "foreground" color #777777 (or regular text color.)

The foreground color sets text anywhere it isn't already set by some other property. In other words this is your basic default text color.

Here's how you would change text color in Visual Studio Code's settings.json file:

{
  "workbench.colorCustomizations": {
    "selection.foreground": "#777777"
  }
}

Here are other important text colors:

1. textLink.foreground: Color of links in text.
2. textLink.activeForeground: Color of text link when mouse is over it or after it was clicked (made active).

Code blocks and block quotes:

1. textBlockQuote.background: Background color of block quotes in text.
2. textBlockQuote.border: Border color of block quotes in text.
3. textCodeBlock.background: Background color for code blocks in text.

How To Change Mini Icon Colors#

The mini icons are small buttons found throughout VSCode UI.

Their color can be changed by changing icon.foreground property.

Here's how to set icon foreground color to magenta:

{
  "workbench.colorCustomizations": {
    "icon.foreground": "#FF00FF"
  }
}

Changing Color of Highlighted Search Matches

// current search match

"editor.findMatchBackground": "#FF00FF",
// other search matches
"editor.findMatchHighlightBackground": "#FF00FF"

In this VSCode tutorial we covered some of the most relevant colors you can change in settings.json file. There are hundreds of other colors you can change, but they are usually not that important.