How to Change the Theme in VS Code

Visual Studio Code turns editing and writing new code into a hassle-free, fun experience. The default dark theme of VS Code was designed to be easier on the eyes than a regular harsh, white background which can cause fatigue after long hours of work. But what if you don’t really like the dark colors on your screen while working?

The benefit of VS Code’s modular design is that you have tremendous freedom in changing the original dark theme with a lot of different customization options that span the gamut of screen color, fonts, and even the look of VS Code’s integrated terminal itself.

This article will tell you all you need to know about changing themes in VS Code.

How to Change Theme in VS Code

Changing the overall theme in VS Code is quick and easy. Here’s what you need to do:

1. Open VS Code.
   
2. Select “File” (“Code” on macOS), select “Preferences,” then choose “Color Theme.”
   
3. VS Code will show you a selection of pre-built themes to choose from in a dropdown menu.
   
4. Use your cursor keys to preview how each theme looks directly on the screen.
   
5. Press “Enter” while selecting to choose that theme to use.
   

Changing the theme to a different pre-configured one might be the first thing you do when you open VS Code for the first time. Coding can take a lot of time, so it’s beneficial to use a theme you’re comfortable with and which doesn’t hurt your eyes while working.

How to Change Your Terminal Theme in VS Code

If you want to stick to the several pre-configured options for the terminal color and theme, the process is the same as changing the overall theme. All of the integrated themes include options to change your terminal’s appearance, but you can’t separate it from the other parts of the theme itself from the main menu.

Before using the aforementioned steps to change the theme, open the terminal console (Ctrl + Shift + P) to preview the changes made to the terminal. Some themes don’t make any changes to the terminal, while others can shift it drastically. In addition, using a theme you like only moderately is no good either, as you might find yourself using the terminal more than you initially thought.

However, there are a few workarounds that will allow you to change the terminal theme, which we’ll cover in the sections below.

How to Change Material Theme in VS Code

VS Code’s main feature is the overabundance of exciting extensions to customize your coding experience and bring more functionalities to the text editor. One of such extensions is the Material Theme, one of the most popular of its kind in the VS Code Marketplace.

Material Theme has a lot of benefits over pre-customized designs, but some users might find it lacking. The user manual for this extension includes a few tips on how to make further changes to suit your needs. Here’s how to change the overall theme in Material Theme:

1. Open the quick menu (Ctrl + Shift + P).
   
2. Type “theme” in the prompt.
   
3. Choose “Preferences: Color Theme.”
   
4. Select one of the Material Theme’s presets.
   

Setting an accent color will make a part of the code pop, which can be useful if it’s a particularly important or troublesome line to diagnose. To set an accent color, use the following steps:

1. Open the quick menu (Ctrl + Shift + P).
   
2. Type “material theme” in the prompt.
   
3. Choose “Material Theme: Set accent color.”
   
4. Choose the color you like from the list.
   

With a changed Material Theme, you can get customization that is above the norm, and we’ll show you how.

How to Manually Customize a Theme in VS Code

VS Code allows for much more customization than simply changing between a few presets. Here are two ways to customize the theme according to your liking.

Method 1 – Download a Custom Theme

When talking about customization, we can’t go without mentioning the expansive VS Code Marketplace. Various extensions exist that solely change the appearance of VS Code without interfering with its functionality. Here’s how to download a theme.

1. Open the VS Code Marketplace. You can also use the integrated “Extensions” menu on the left of the screen.
   
2. Type in “theme” in the search bar to browse only those items that change the theme. One of our top recommendations is the Material Theme mentioned above, but we’re sure you can find one that suits you best.
   
3. Download the extension (if using a browser) then install the .VSIX file by going to “Extensions > ellipsis icon > Install from VSIX.” Alternatively, when you find the theme you like in VS Code, click on it, then select the “Install” button on the details (right) menu.
   
4. Once the theme is installed and enabled, select it with the “Preferences: Color Theme” command.
   

Method 2 – Editing the Theme

All themes and settings are stored in VS Code using plaintext. Follow the steps to access these settings and make the changes you want:

1. Create a workbench or user settings file. The former will only change the appearance of the current project, but the latter will remain across new projects.
2. Type in “Preferences: Open Settings” command in the main menu.
   
3. Select the tab on the top left to choose between user and workbench settings.
   
4. Press on “Edit in settings.json” to open the file that contains the settings you need to change.
   
5. Find the setting named “workbench.colorCustomizations.”
   
6. Focus on changing the theme you want by putting in

“[Theme_name]”: { }

The Theme_name is the name of the theme you want to change. Keep the quotes.

1. Further changes to the theme are made in the new brackets. Type in the name of the parameter you want to change (in quotes), type ‘:’ then choose the appropriate setting you need.
2. Use this guide to find the parameters you want to change.
3. Colors are stored in hexadecimal code. Use a color hexadecimal guide to pinpoint the color you want.
   
4. When you’re done with the changes, save the file.
   

This method can be used to change most of the UI and code appearance, including the base theme color, backgrounds, terminal appearance, button colors, and font styles.

If you’re wondering how to change the font in VS code, use method 2 outlined above. You’ll probably need a font guide.

Additional FAQ

Where Are VS Code Themes Stored?

The themes that come from extensions are stored in the extensions folder of VS Code. This location is in your installation directory (for example C:) and can be usually found here:

~/.vscode/extensions

Here, “~” is the install directory for VS Code.

Base themes are stored in: Microsoft VS Code\resources\app\extensions\theme-defaults\themes

However, you don’t need to spend time looking for files to change. Changing the user settings via the “settings.json” file will deliver much faster results.

How Do I Change the Comment Color in VS Code?

To change the comment colors, open the “settings.json” file (use “Method 2” outlined above), select the theme you want to change, then input (with quotes):

“comments” : “#hexcode”

Here, “hexcode” is the code for the desired color. Use a color picker to choose an appropriate color.

What Is the Best Theme in VS Code?

The best VS Code theme is the one you find most pleasing and useful for your programming efforts. Different users can have distinct color and theme preferences. Thankfully, there are plenty of options to choose from, whether in the pre-configured themes, extension downloads, or in the ability to customize a theme exactly to your liking.

Choose Your Theme

With these instructions, you can fully customize a theme as you want. With its wealth of options, VS Code remains one of the most popular text editors, and its ability to gain new features with extensions make it very similar to an IDE.

What themes do you use in VS Code? Have you made any changes to your preferred theme? Let us know in the comments section below.

Let's block ads! (Why?)