Как изменить внешний вид visual studio 2019

Developers have a thing for dark mode. When it comes to productivity, we purposefully dim and change the color scheme of our IDEs and code editors from the standard stark white to an inverted contrast. We do this, in part, to save our eyes from the glaring screen and decrease the potential strain.

But not all dark themes are made equal. There’s more to it than just inverting the color scheme from white to black. The way functions, classes, modules, and parts of your code get highlighted can also determine your overall productivity over time. The right color scheme can help you quickly scan and pick up anomalies in your code.

What are Visual Studio 2019 Themes?

Themes are switchable skins that let you configure the color scheme and font for your Visual Studio editor. The marketplace currently has over 5000 themes available and covers both Visual Studio 2019 and Visual Studio Code, each created to visually optimize how code is displayed. This is done through pre-configurations of how functions, modules, classes, and parts of code are colored.

Quick tutorial – how to install a Visual Studio theme

The perk of using Visual Studio 2019 over Visual Studio Code is that you can sync your settings across devices, in addition to having tools that directly integrate with Azure services.  This means that your theme configuration gets to go with you, even if you’re not on your usual work machine.

The easiest way to install a Visual Studio theme is to navigate over to the Extensions option in the menu bar and select Manage Extensions.

The next step is to select Visual Studio Marketplace under Online on the left panel.

Once done, search for the theme you want and select it in the search results.

After you’ve downloaded your theme, close VS2019 down and it will begin installing the theme and create a prompt that looks something like this:

After you’ve done this, open up Visual Studio 2019 again and navigate over to your Options panel located under the Tools tab. Select Color Theme option and select the theme you want to apply.

That’s basically it for installing and switching between themes in Visual Studio. Without further ado, let’s get into reviewing the top VS Code themes. 

With Visual Studio Code being one of the most popular code editors on the market, Visual Studio 2019 gets the perks of a shared marketplace and community size.  When it comes to themes, there is an abundance of them available. But which one should you choose? Here is a list of the top 11 Visual Studio themes that other developers are using.

Top 11 Visual Studio themes

1. One Dark Pro

Beyond the standard Visual Studio dark mode, One Dark Pro ranks as one of the most installed themes for Visual Studio.

Created by binaryify, it has been downloaded over 91k times and ports Atom’s original iconic One Dark theme over for Visual Studio 2019.

A special feature of One Dark Pro is that the highlighting syntax supports markdown preview – which can come in handy for writing documentation. Markdown is not for everyone and being able to differentiate the different stylings can make life easier.

2. Midnight Spruce Pine

Midnight Spruce Pine is a dark theme that merges the best parts of Tim Macharia’s Pine Gap Dark theme and VS Code Ayu Mirage. It runs on a yellow highlight for methods and a blue theme for variables, functions, and classes. This makes it easy to follow and scan code based on hierarchy and its scoped locations.

3. Atom One Dark Theme

Atom One Dark Theme is another VS Code theme that takes from Atom‘s original One Dark theme. It is an alternative to One Dark Pro and proves to be popular based on the 2.5 million downloads.

4. Goodnight Theme

Goodnight theme is a dark theme for Visual Studio that’s optimized for C#, JSON, XML, and Razor. Methods are highlighted in yellow while arrays are in nicely contrasted aqua green. The most important value in Goodnight Theme are variables, where the contrast between the dark background is at its maximum through white highlighting.

5. Midnight Deep

Midnight Deep is a VS2019 theme for developers that love their dark themes with the maximum contrast effect. The solid black background ensures that this is possible and makes a fantastic theme for low-light situations. If you’re the kind of developer that loves to work through the night or sit under a lot of artificial light, Midnight Deep might just be the Visual Studio theme for you.

6. Night Owl

Night Owl is a nifty little dark theme that’s more than just inverting the colors. The creator of Night Owl made sure to include people with colorblindness and those working in low-light environments into the color scheme consideration.

7. Monokai Night

Monokai Night is a color palette that’s chosen for its functionality and aesthetics. It was originally created in 2006 by Wimer Hazenberg and was adopted as the original theme for Sublime Text.

If you’re a Sublime Text user, then Monokai Night brings familiarity to Visual Studio.

8. Voyager Theme

Released in 2020 and inspired by Jetbrains, the Voyager theme embraces text highlighting against a dark background with orange, green, light yellow, and white palettes. The contrast against the off-black background increases based on the importance of type in the code. For example, comments are readable but not jumping out at us unless we go searching for them. However, classes have maximum contrast for easy scannability and tracking.

9. Pine Gap Dark

Pine Gap Dark is a VS2019 theme that’s inspired by the color palettes of Ayu Mirage with a mustard yellow highlight to make your tabs pop. This theme is great for JavaScript, CSS/SCSS, C#, and JSON and was created using Microsoft’s Visual Studio Color Theme Designer. 

10. MonokaiVS

MonokaiVS theme merges two popular themes together to form one epic theme. One Monokai takes the best bits from One Dark theme and color principles from Monokai to visually optimize the code output on Visual Studio.

11. Midnight Lights

If black isn’t your kind of color scheme, Midnight Lights hits the dark mode mood with something a little different. The deep dark blue background gives off the nighttime vibe. It also gives an ambiance glow through its various shades of blue for classes and functions whilst highlighting with maximum contrast for new methods and variables.

Wrapping up

When it comes to coding, dark mode is more than just dark mode. It is the thing that makes our code visually easier to track and trace, in addition to making it visually appealing.

Most dark themes follow the same format – highest contrast for the most important pieces of information. Based on the theme creator’s preferences, it can mean the difference between a function and class vs variables and arrays as the highlighted element.

Tabnine

Tabnine is an intelligent, AI-driven code completion tool that can cut your coding time, reduce mistakes, and make best practice suggestions.

Get Started

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 > Theme > Color Theme. (Code > Preferences > Theme > 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.

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

Auto switch based on OS color scheme

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

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

• workbench.preferredLightColorTheme — defaults to «Default Light+»
• workbench.preferredDarkColorTheme — defaults to «Default Dark+»
• workbench.preferredHighContrastColorTheme — defaults to «Default High Contrast»
• workbench.preferredHighContrastLightColorTheme — defaults to «Default High Contrast Light»

Customizing a Color Theme

Workbench colors

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"
    }
}

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

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

Editor syntax highlighting

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 to the Color Theme guide for more information.

Again, 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 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.

Users 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 token will be rendered with that color, without the need for any additional coloring rules.

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

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

To see what semantic tokens are computed and how they are styled, users 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 semantic token type. The section shows the semantic token information (type and any number of modifiers) as well as the styling rules that apply.

More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.

Creating your own Color Theme

Creating and publishing a theme extension is 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 Create a new Color Theme topic in our Extension API section to learn more.

Remove default Color 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)). Click the Filter Extensions button from the top of the Extensions view, select the Built-in option, 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.

File 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 > Theme > File Icon Theme. (Code > Preferences > Theme > 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 a file 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 file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file 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 file 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 File Icon Theme topic in our Extension API 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.
• Extension API — Learn about other ways to extend VS Code.
• Color Theme — Color Theme extension API.
• File Icon Theme — File Icon Theme extension API.

2/2/2023

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 > Theme > Color Theme. (Code > Preferences > Theme > 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.

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

Auto switch based on OS color scheme

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

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

• workbench.preferredLightColorTheme — defaults to «Default Light+»
• workbench.preferredDarkColorTheme — defaults to «Default Dark+»
• workbench.preferredHighContrastColorTheme — defaults to «Default High Contrast»
• workbench.preferredHighContrastLightColorTheme — defaults to «Default High Contrast Light»

Customizing a Color Theme

Workbench colors

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"
    }
}

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

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

Editor syntax highlighting

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 to the Color Theme guide for more information.

Again, 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 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.

Users 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 token will be rendered with that color, without the need for any additional coloring rules.

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

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

To see what semantic tokens are computed and how they are styled, users 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 semantic token type. The section shows the semantic token information (type and any number of modifiers) as well as the styling rules that apply.

More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.

Creating your own Color Theme

Creating and publishing a theme extension is 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 Create a new Color Theme topic in our Extension API section to learn more.

Remove default Color 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)). Click the Filter Extensions button from the top of the Extensions view, select the Built-in option, 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.

File 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 > Theme > File Icon Theme. (Code > Preferences > Theme > 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 a file 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 file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file 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 file 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 File Icon Theme topic in our Extension API 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.
• Extension API — Learn about other ways to extend VS Code.
• Color Theme — Color Theme extension API.
• File Icon Theme — File Icon Theme extension API.

2/2/2023

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 > Theme > Color Theme. (Code > Preferences > Theme > 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.

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

Auto switch based on OS color scheme

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

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

• workbench.preferredLightColorTheme — defaults to «Default Light+»
• workbench.preferredDarkColorTheme — defaults to «Default Dark+»
• workbench.preferredHighContrastColorTheme — defaults to «Default High Contrast»
• workbench.preferredHighContrastLightColorTheme — defaults to «Default High Contrast Light»

Customizing a Color Theme

Workbench colors

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"
    }
}

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

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

Editor syntax highlighting

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 to the Color Theme guide for more information.

Again, 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 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.

Users 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 token will be rendered with that color, without the need for any additional coloring rules.

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

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

To see what semantic tokens are computed and how they are styled, users 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 semantic token type. The section shows the semantic token information (type and any number of modifiers) as well as the styling rules that apply.

More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.

Creating your own Color Theme

Creating and publishing a theme extension is 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 Create a new Color Theme topic in our Extension API section to learn more.

Remove default Color 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)). Click the Filter Extensions button from the top of the Extensions view, select the Built-in option, 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.

File 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 > Theme > File Icon Theme. (Code > Preferences > Theme > 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 a file 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 file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file 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 file 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 File Icon Theme topic in our Extension API 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.
• Extension API — Learn about other ways to extend VS Code.
• Color Theme — Color Theme extension API.
• File Icon Theme — File Icon Theme extension API.

2/2/2023

Once unpublished, all posts by austinstanding will become hidden and only accessible to themselves.

If austinstanding is not suspended, they can still re-publish their posts from their dashboard.

Note:

Once unpublished, this post will become invisible to the public and only accessible to Austin Standing.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community 👩‍💻👨‍💻 safe. Here is what you can do to flag austinstanding:

Make all posts by austinstanding less visible

austinstanding consistently posts content that violates DEV Community 👩‍💻👨‍💻’s
code of conduct because it is harassing, offensive or spammy.