Color Themes

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.

Preview themes from the Command Palette

Selecting the Color Theme

The current color theme is configured in the settings.

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Default Dark+"
}

However, there is no need to edit the settings directly. It's easier to use the Color Theme Picker to preview and select a theme.

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

Themes in the Command Palette

Tip: By default, the theme is configured in the user settings and applies to all workspaces. But you can also configure a workspace specific theme. To do so, set a theme in the workspace settings.

Color Themes from the Marketplace

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

Many more themes have been uploaded to the VS Code Extension Marketplace 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 Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) search box.

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

Using existing TextMate Themes

You can add existing TextMate color themes (.tmTheme) to VS Code. For example, the [Color Sublime] site has hundreds of TextMate themes available. See the Adding a new Theme topic in our Extension Authoring section to learn more.

Icon Themes

File icon themes can be contributed by extensions and selected by users as their favorite set of file icons. File icons are shown in the File Explorer and tabbed headings.

Selecting the File Icon Theme

The current File Icon theme is persisted in your user settings.

  // Specifies the icon theme used in the workbench.
  "workbench.iconTheme": null
}

There is no need to edit the settings.json file directly. It is better to use the File Icon Theme picker to preview and select a theme.

  1. Open the Icon Theme picker with File > Preferences > File Icon Theme. (Code > Preferences > File Icon Theme on Mac)
  2. Use the cursor keys to preview the icons of the theme.
  3. Select the theme you want and hit Enter.

By default, no file icon set is configured, therefore the File Explorer shows no icons. Once an icon theme is selected, the selected theme will be remembered and set again when VS Code is started the next time .

VS code ships with two icon themes; Minimal and Seti. To install more icon themes, select the Find more in the Marketplace... item in the icon theme picker.

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

Creating your own File Icon Theme

You can create your own File Icon Theme from icons (preferably SVG), see the Adding a new Icon Theme topic in our Extension Authoring section for details.

Next Steps

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