Changing the Color Theme

Color themes let you modify VS Code's background, text and language syntax colorization to suit your preferences and work environment. VS Code supports light, dark and high contrast themes.

Selecting the Color Theme

There are several out-of-the-box color themes in VS Code for you to try out.

  1. Open the Color Theme picker with File | Preferences | Color Theme.
  2. Use the cursor keys to preview the colors of the theme.
  3. Select the theme you want and hit kbstyle(Enter).

Themes in the Command Palette

Many themes have been uploaded to the VS Code Extension Gallery by the community. If you find one you want to use, simply install it and restart VS Code and the new theme will be available.

Tip: To search for themes, type 'theme' in the Extension: Install Extension dropdown to filter on extensions with 'theme' in their name.

filter theme

You can also browse the VS Code Marketplace to find available themes.

Adding a new Theme

You can also add new TextMate theme files (.tmTheme) to your VS Code installation using the yo code extension generator.

ColorSublime has hundreds of existing TextMate themes to choose from. Pick a theme you like and copy the Download link to use in the Yeoman generator e.g. http://colorsublime.com/theme/download/42472. The 'code' generator will prompt you for the URL or file location of the .tmTheme file, the theme name as well as other information for the theme.

yo code theme

Copy the generated theme folder to a new folder under your .vscode/extensions folder and restart VS Code.

Open the Color Theme picker theme with File | Preferences | Color Theme and you can see your theme in the dropdown. Arrow up and down to see a live preview of your theme.

my theme

If you'd like to share your new theme with the community, you can publish it to the Extension Gallery. Use the vsce publishing tool to package your theme and publish it to the VS Code gallery.

Tip: To make it easy for users to find your theme, include the word "theme" in the extension description and set the Category to Theme in your package.json.

We also have recommendations on how to make your extension look great on the VS Code Marketplace, see Marketplace Presentation Tips.

Next Steps

Themes are just one way to customize VS Code. If you'd like to learn more about VS Code extensibility, try these topics:

Common Questions

Nothing yet