Color Themes

Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment.

Selecting the Color Theme

1. In VS Code, open the Color Theme picker with File > Preferences > Color Theme. (Code > Preferences > Color Theme on macOS).
2. You can also use the keyboard shortcut ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T) to display the picker.
3. Use the cursor keys to preview the colors of the theme.
4. Select the theme you want and press Enter.

The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+,)).

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

Tip: By default, the theme is stored in your user settings and applies globally to all workspaces. 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, 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.

Customizing a Color Theme

You can customize your active color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings.

To set the colors of VS Code UI elements such as list & trees (File Explorer, suggestions widget), diff editor, Activity Bar, notifications, scroll bar, split view, buttons and more, use workbench.colorCustomizations.

You can use IntelliSense while setting workbench.colorCustomizations values or, for a list of all customizable colors, see the Theme Color Reference.

To customize a specific theme only, use the following syntax:

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

To tune the editor's syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file:

A pre-configured set of syntax tokens ('comments', 'strings', ...) is available for the most common constructs. If you want more, you can do so by directly specifying TextMate theme color rules:

Note: Directly configuring TextMate rules is an advanced skill as you need to understand on how TextMate grammars work. Go here for more information

Again, to customize a specific theme only, use the following syntax:

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    }
},

Creating your own color theme

Creating and publishing a theme extension is quite easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.

VS Code's Yeoman extension generator will help you generate the rest of the extension.

See the Adding a new Theme topic in our Extension Authoring section to learn more.

Remove default themes

If you'd like to remove some of the default themes shipped with VS Code from the Color Theme picker, you can disable them from the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)). Open the ... More dropdown from the top of the Extensions view, select Show Built-in Extensions, and you'll see a THEMES section listing the default themes.

You can disable a built-in theme extension as you would any other VS Code extension with the Disable command on the gear context menu.

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

1. In VS Code, open the File Icon Theme picker with File > Preferences > File Icon Theme. (Code > Preferences > File Icon Theme on macOS).
2. You can also use the Preferences: File Icon Theme command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).
3. Use the cursor keys to preview the icons of the theme.
4. Select the theme you want and hit Enter.

By default, the Seti file icon set is used and those are the icons you see in the File Explorer. Once an icon theme is selected, the selected theme will be remembered and appear again whenever VS Code is restarted. You can disable file icons by selecting None.

VS code ships with two icon themes; Minimal and Seti. To install more icon themes, select the Install Additional File Icon Themes... item in the icon theme picker and you'll see a query for file icon themes (tag:icon-theme) in the Extensions view.

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

The active File Icon theme is persisted in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+,)).

  // Specifies the icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"
}

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:

• Settings - Learn how to configure VS Code to your preferences through user and workspace settings.
• Snippets - Add additional snippets to your favorite language.
• Extending Visual Studio Code - Learn about other ways to extend VS Code.
• Themes, Snippets, and Colorizers - You can package themes, snippets and language colorizers for use in VS Code.