How to change the color scheme in Visual Studio Code ? (2023)


๐Ÿ‘คย Diwas Poudel ย ย  ๐Ÿ•’ 26 May 2023 ย ย  ๐Ÿ“ TECH

Sometimes, you may not be fond of the color scheme in Visual Studio Code and wish to make a change. If you haven't found an option to modify it yet, you have come to the right place. Ourtechroom is here to assist you in altering the color scheme in Visual Studio Code.

People prefer to change color to improve their productivity by settings their desired color theme, to make the code easier to read.

ย There are many different color schemes to choose from and here we will discuss two of them.

1. Using Command Paletteย 

The steps are as follows:

  1. Open Visual Studio Code.
  2. Then press Ctrl + Shift + P to open the command palette.
  3. Then type "color theme"
    Color Theme
    fig. search for Color Theme
  4. Next click on "Preference: Color Theme".
    Select Preference: Color Theme
    fig. Select Preference: Color Theme option
  5. And then select the color theme you want from the list.

Here I am selecting the "Atom One Dark" theme.

Select Desire Theme from the list
fig. Select Desire Theme from the list

If you do not have desired color theme then click on "Browse additional color theme" and then select for desire color theme from the list or search it.

After that, it will install that theme for your visual studio and will apply the theme.

browse additional color themes
fig. browse additional color themes

2. Using the Settings UI

The steps are as follows:

  1. Open the Settings UI by pressing Ctrl +,
  2. Search for "color theme".
  3. Under workbench:color theme ,Select the color theme you want from the list.
    Select color under Workbench: Color Theme
    fig. Select color under Workbench: Color Theme
  4. And it will apply to Visual Studio code automatically.

3. Using settings.json file

If you know the name of the Color theme then you can simply replace the value part with the name of the theme.

eg.

ย  "workbench.colorTheme": "value",
ย 
Suppose the name of the theme that I want to use is: Atom One Dark. Then I will use it as :
ย 
{
...
"workbench.colorTheme": "Atom One Dark",
...
ย 
}

Can I switch back to the default color scheme in Visual Studio Code?

Yes, you can, and here are the steps:

  1. Open Visual Studio Code.
  2. Press Ctrl + Shift + P to open the command Palette.
  3. Then search for Preferences: Open User Settings (JSON).
  4. And click on it.
    Settings.json file
    fig. Settings.json fileย 

Then remove the line stating workbench.colorTheme

Now your Visual Studio Code will select the default theme.

Conclusion:

In this way we can change color theme or schema of Visual Studio Code.

ย