Themes

Color Themes

Color themes enable you to modify the colors in the Visual Studio Code user interface to match your preferences and work environment. A Color Theme affects both the VS Code user interface elements and the editor highlighting colors.

To select a different Color Theme:

1. Select the File > Preferences > Theme > Color Theme menu item, or use the Preferences: Color Theme command (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)) to display the Color Theme picker.

2. Use the Up and Down keys to navigate through the list and preview the colors of the theme.

3. 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": "Solarized Dark"

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.

You can select Color Themes from the VS Code Marketplace directly from the Color Theme picker by selecting Browse Additional Color Themes....

Alternately, you can search for themes in the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) search box by using the @category:"themes" filter.

Automatically switch based on OS color scheme

Windows and macOS support light and dark color schemes. There is a setting, window.autoDetectColorScheme Open in VS Code Open in VS Code Insiders , that instructs VS Code to listen to changes to the OS's color scheme and switch to a matching theme accordingly.

Similarly, you can use the window.autoDetectHighContrast Open in VS Code Open in VS Code Insiders setting to automatically detect if the OS switched to a high-contrast color scheme.

To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes in the Settings editor:

• Workbench: Preferred Dark Color Theme - defaults to Dark Modern
• Workbench: Preferred Light Color Theme - defaults to Light Modern
• Workbench: Preferred High Contrast Color Theme - defaults to Dark High Contrast
• Workbench: Preferred High Contrast Light Color Theme - defaults to Light High Contrast

Customize a Color Theme

Workbench colors

You can customize your active color theme with the workbench.colorCustomizations Open in VS Code Open in VS Code Insiders and editor.tokenColorCustomizations Open in VS Code Open in VS Code Insiders 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 Open in VS Code Open in VS Code Insiders .

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

To make customizations to a specific theme, use the following syntax:

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

If a customization applies to more than one theme, you can name multiple themes or use * as a wildcard at the beginning and end of the name:

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

If a theme sets a color or border that you don't like, you can use default to set it back to the original value:

  "workbench.colorCustomizations": {
      "diffEditor.removedTextBorder": "default"
  }

Editor syntax highlighting

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

A preconfigured 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:

To customize specific themes, you can do this in one of the following ways:

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

Editor semantic highlighting

Some languages (currently: TypeScript, JavaScript, Java) provide semantic tokens. Semantic tokens are based on the language service's symbol understanding and are more accurate than the syntax tokens coming from the TextMate grammars that are driven by regular expressions. The semantic highlighting that is computed from the semantic tokens goes on top of syntax highlighting and can correct and enrich the highlighting as seen in the following example:

The "Tomorrow Night Blue" color theme without semantic highlighting:

The "Tomorrow Night Blue" color theme with semantic highlighting:

Notice the color differences based on language service symbol understanding:

• line 10: languageModes is colored as a parameter.
• line 11: Range and Position are colored as classes and document as a parameter.
• line 13: getFoldingRanges is colored as a function.

The settings editor.semanticHighlighting.enabled Open in VS Code Open in VS Code Insiders serves as the main control on whether semantic highlighting is applied. It can have values true, false, and configuredByTheme.

• true and false turn semantic highlighting on or off for all themes.
• configuredByTheme is the default and lets each theme control whether semantic highlighting is enabled or not. All the themes that ship with VS Code (for example, the "Dark+" default) have semantic highlighting enabled by default.

You can override the theme setting by:

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
}

When semantic highlighting is enabled and available for a language, it is up to the theme to configure whether and how semantic tokens are colored. Some semantic tokens are standardized and map to well-established TextMate scopes. If the theme has a coloring rule for these TextMate scopes, the semantic tokens are rendered with that color, without the need for any additional coloring rules.

Additional styling rules can be configured in editor.semanticTokenColorCustomizations":

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
}

To see what semantic tokens are computed and how they are styled, you can use the scope inspector (Developer: Inspect Editor Tokens and Scopes), which displays information for the text at the current cursor position.

If semantic tokens are available for the language at the given position and enabled by theme, the inspect tool shows a section