Цветовая схема visual studio 2017
Colors visible in the Visual Studio Code user interface fall in two categories:
- Workbench colors used in views and editors, from the Activity Bar to the Status Bar. A complete list of all these colors can be found in the theme color reference.
- Syntax colors and styles used for source code in the editor. The theming of these colors is different as syntax colorization is based on TextMate grammars and TextMate themes as well as semantic tokens.
This guide will cover the different ways in which you can create themes.
Workbench colors
The easiest way to create a new workbench color theme is to start with an existing color theme and customize it. First switch to the color theme that you want to modify, then open your settings and make changes to the workbench.colorCustomizations setting. Changes are applied live to your VS Code instance.
The following, for example, would change the color of the title bar:
A complete list of all themable colors can be found in the color reference.
Syntax colors
For syntax highlighting colors, there are two approaches. You can reference an existing TextMate theme ( .tmTheme file) from the community, or you can create your own theming rules. The easiest way is to start with an existing theme and customize it, much like in the workbench colors section above.
First switch to the color theme to customize and use the editor.tokenColorCustomizations settings. Changes are applied live to your VS Code instance and no refreshing or reloading is necessary.
For example, the following would change the color of comments within the editor:
The setting supports a simple model with a set of common token types such as 'comments', 'strings' and 'numbers' available. If you want to color more than that, you need to use TextMate theme rules directly, which are explained in detail in the Syntax Highlighting Guide.
Semantic colors
Semantic highlighting is available for TypeScript and JavaScript in VS Code release 1.43. We expect it to be adopted by other languages soon.
Semantic highlighting enriches syntax coloring based on symbol information from the language service, which has more complete understanding of the project. The coloring changes appear once the language server is running and has computed the semantic tokens.
Each theme controls whether to enable semantic highlighting with a specific setting that is part of the theme definition. The style of each semantic token is defined by the theme's styling rules.
Users can override the semantic highlighting feature and colorization rules using the editor.tokenColorCustomizations setting:
Enable semantic highlighting for a specific theme:
Themes can define theming rules for semantic tokens as described in the Syntax Highlighting Guide.
Create a new Color Theme
Once you have tweaked your theme colors using workbench.colorCustomizations and editor.tokenColorCustomizations , it's time to create the actual theme.
Generate a theme file using the Developer: Generate Color Theme from Current Settings command from the Command Palette
Use VS Code's Yeoman extension generator to generate a new theme extension:
If you customized a theme as described above, select 'Start fresh'.
Copy the theme file generated from your settings to the new extension.
You can also use an existing TextMate theme by telling the extension generator to import a TextMate theme file (.tmTheme) and package it for use in VS Code. Alternatively, if you have already downloaded the theme, replace the tokenColors section with a link to the .tmTheme file to use.
Tip: Give your color definition file the -color-theme.json suffix and you will get hovers, code completion, color decorators, and color pickers when editing.
Tip: 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 or into your extension. It will be in a format like "https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"
Test a new Color Theme
To try out the new theme, press F5 to launch an Extension Development Host window.
There, open the Color Theme picker with File > Preferences > Color Theme and you can see your theme in the dropdown list. Arrow up and down to see a live preview of your theme.
Changes to the theme file are applied live in the Extension Development Host window.
Publishing a Theme to the Extension Marketplace
If you'd like to share your new theme with the community, you can publish it to the Extension Marketplace. Use the vsce publishing tool to package your theme and publish it to the VS Code Marketplace.
Tip: To make it easy for users to find your theme, include the word "theme" in the extension description and set the Category to Themes 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.
Adding a new Color ID
Color IDs can also be contributed by extensions through the color contribution point. These colors also appear when using code complete in the workbench.colorCustomizations settings and the color theme definition file. Users can see what colors an extension defines in the extension contributions tab.
You can change the fonts and the colors in Visual Studio in several ways. For example, you can change the default dark theme (also referred to as "dark mode") to a light theme, a blue theme, an extra-contrast theme, or a theme that matches your system settings. You can also change the default font and text size in both the IDE and the code editor.
See the We’ve upgraded the UI in Visual Studio 2022 blog post to learn more about the subtle color contrast ratio adjustments and a new Cascadia Code font we've added to make Visual Studio more accessible for everyone.
You can change the fonts and the colors in Visual Studio in many ways. For example, you can change the default blue color theme to the dark theme (also referred to as "dark mode"). You can also select an extra-contrast theme if that best suits your needs. And, you can change the default font and text size in both the IDE and the code editor.
Change the color theme
Here's how to change the color theme of the IDE frame and the tool windows in Visual Studio.
On the menu bar, choose Tools > Options.
In the options list, choose Environment > General.
In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.
You can also choose to use the theme that Windows uses by selecting Use system setting.
When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.
Want even more themes to choose from? Check out the wide range of custom themes on the Visual Studio Marketplace. And to see examples of new Visual Studio 2022 custom themes based on VS Code, take a look at the Introducing a collection of new Visual Studio themes blog post.
On the menu bar, choose Tools > Options.
In the options list, choose Environment > General.
In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.
When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.
You can create and edit your own Visual Studio themes by using an extension. Choose from either of the following two options, depending on the version of Visual Studio you're using:
Change fonts and text size
You can change the font and text size for all the IDE frame and tool windows, or for only certain windows or text elements. You can also change the font and text size in the editor, too.
To change the font and text size in the IDE
On the menu bar, choose Tools > Options.
In the options list, choose Environment > Fonts and Colors.
In the Show settings for list, choose Environment.
If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.
Modify the Font and Size options to change the font and text size for the IDE.
Select the appropriate item in Display items, and then modify the Item foreground and Item background options.
On the menu bar, choose Tools > Options.
In the options list, choose Environment > Fonts and Colors.
In the Show settings for list, choose Environment.
If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.
Modify the Font and Size options to change the font and text size for the IDE.
Select the appropriate item in Display items, and then modify the Item foreground and Item background options.
To change the font and text size in the editor
On the menu bar, choose Tools > Options.
In the options list, choose Environment > Fonts and Colors.
In Show settings for list, select Text Editor.
Modify the Font and Size options to change the font and text size for the editor.
Select the appropriate item in Display items, and then modify the Item foreground and Item background options.
On the menu bar, choose Tools > Options.
In the options list, choose Environment > Fonts and Colors.
In Show settings for list, select Text Editor.
Modify the Font and Size options to change the font and text size for the editor.
Select the appropriate item in Display items, and then modify the Item foreground and Item background options.
For more information about how to change fonts and colors for accessibility, see the Set accessibility options section of this page. And, for details about all the user interface (UI) elements where you can change font and color schemes, see the Fonts and Colors, Environment, Options Dialog Box page.
Set language-specific editor options
Set accessibility options
In a neurodiverse world, we want to support our different learners and low-vision users by offering the following font options and color themes:
- You can use the Cascadia Code font, which adds more weight to the proportions of letters, numerals, and characters to help disambiguate them. Cascadia Code also includes coding ligatures.
- You can choose to use a high-contrast color theme for all the apps and UI on a computer, or an extra-contrast color theme for Visual Studio only.
Use the Cascadia Code font
The new Cascadia Code font includes Cascade Mono, which is the default font in Visual Studio 2022. Not only are both of these fonts easier to read, but the Cascadia Code font also includes coding ligatures that turn a sequence of characters into a glyph. Coding ligatures, or glyphs, make it easier for people to cognitively associate the meaning behind them.
The following screenshot shows an example of the default Cascadia Mono font and lists a series of characters, to include mathematical symbols, that you might find yourself using while you code.
The following screenshot shows an example of the Cascadia Code font, where the same series of characters shown previously are now converted to coding ligatures, or glyphs.
Notice that the last line of text in the Cascadia Code screenshot shows how the space between duplicate characters is reduced, which also makes them easier to read.
Here's how to toggle between the Cascadia fonts:
Go to Tools > Options > Environment > Fonts and colors.
From the Font dropdown list, select either the Cascadia Code font or the Cascadia Mono font you want, and then select OK.
There are color theme options for you if you experience low vision. You can use a high-contrast option for all the apps and UI on a computer, or an extra contrast option for Visual Studio only.
Use Windows high contrast
Use either of the following procedures to toggle the Windows high contrast option:
In Windows or in any Microsoft application, press the Left Alt+Left Shift+PrtScn keys.
In Windows, choose Start > Settings > Ease of Access. Then, under the Vision section in Windows 10 and later, choose High contrast.
The Windows high contrast setting affects all applications and UI on the computer.
Use Visual Studio extra contrast
Use the following procedures to toggle the Visual Studio extra contrast option:
On the menu bar in Visual Studio, choose Tools > Options, and then, in the options list, choose Environment > General.
In the Color theme drop-down list, choose the Blue (Extra Contrast) theme, and then choose OK.
If there is an accessibility option for colors or fonts that you think might be useful but isn't currently available in Visual Studio, please let us know by selecting Suggest a feature in the Visual Studio Developer Community. For more information about this forum and how it works, see the Suggest a feature page.
More accessibility features in Visual Studio
Visual Studio also includes features to help people who have limited dexterity to write. For example, Visual Studio supports Dvorak keyboard layouts, which make the most frequently typed characters more accessible.
You can also customize the default keyboard shortcuts available with Visual Studio. For more information, see the following pages:
Visual Studio also includes auto-completion for methods and parameters; for more information, see IntelliSense in Visual Studio.
To learn more about recent accessibility updates, see the Accessibility improvements in Visual Studio 2017 version 15.3 blog post.
There are more ways to customize Visual Studio to be more accessible to you. For example, you can change the behavior of pop-up windows, text-based tool windows, toolbar buttons, margin indicators, and more.
The dialog boxes and menu commands you see might differ from those described here, which can vary depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Reset settings.
Change the behavior of pop-up windows
Visual Studio displays pop-up windows in the editor. These pop-up windows include information that makes coding easier, such as parameters to complete a function or statement. The pop-up windows can also be helpful if you have difficulty typing. However, some users might find that they interfere with focus in the code editor, which can be problematic.
Here's how to turn off the pop-up windows:
From the Tools menu, choose Options.
Choose Text Editor > All Languages > General.
Clear the Auto list members and Parameter information checkboxes.
You can rearrange the windows in the integrated development environment (IDE) to best suit the way you work. You can dock, float, hide, or automatically hide each tool window. For more information about how to change window layouts, see Customize window layouts.
Change the settings of text-based tool windows
You can change the settings for text-based tool windows, such as the Command window, Immediate window, and Output window by using Tools > Options > Environment > Fonts and Colors.
When you select [All Text Tool Windows] in the Show settings for drop-down list, the default setting is listed as Default in the Item foreground and Item background drop-down lists. Choose the Custom button to change these settings.
You can also change the settings for how text is displayed in the editor. Here's how.
From the Tools menu, choose Options.
Choose Environment > Fonts and Colors.
Select an option on the Show settings for drop-down menu.
To change the font size for text in an editor, choose Text Editor.
To change the font size for text in text-based tool windows, choose [All Text Tool Windows].
To change the font size for ToolTip text in an editor, choose Editor Tooltip.
To change the font size for text in statement completion pop-ups, choose Statement Completion.
From Display items, select Plain Text.
In Font, select a new font type.
In Size, select a new font size.
To reset the text size for text-based tool windows and editors, choose Use Defaults.
Choose OK.
Change the colors for text, margin indicators, white space, and code elements
You can choose to change the default colors for text, margin indicators, white space, and code elements in the editor. Here's how.
From the Tools menu, choose Options.
In the Environment folder, choose Fonts and Colors.
In Show settings for, choose Text Editor.
From Display items, select an item whose display you need to change, such as Plain Text, Indicator Margin, Visible White Space, HTML Attribute Name, or XML Attribute.
Select display settings from the following options: Item foreground, Item background, and Bold.
Choose OK.
To use high contrast colors for all application windows on your operating system, press Left Alt+Left Shift+PrtScn. If Visual Studio is open, close and then reopen it to fully implement high contrast colors.
Add text to toolbar buttons or modify the text
To improve toolbar usability and accessibility, you can add text to toolbar buttons.
To assign text to toolbar buttons
From the Tools menu, choose Customize.
In the Customize dialog box, select the Commands tab.
Select Toolbar, and then choose the toolbar name that contains the button you intend to display text for.
In the list, select the command you intend to change.
Choose Modify Selection.
Choose Image and Text.
To modify the displayed text in a button
Re-select Modify Selection.
Adjacent to In Name, insert provide a new caption for the selected button.
Accessibility support
For more information about features, products, and services that make Windows more accessible for people with disabilities, see Accessibility products and services from Microsoft. And, for more information about how to obtain more accessible formats of documentation for Microsoft products, see the Documentation in alternative formats section of the Accessibility products and services from Microsoft page.
The accessibility information included on this page might apply only to users who license Microsoft products in the United States. If you obtained this product outside of the United States, visit the Microsoft Accessibility website for a list of Microsoft support services telephone numbers and addresses. You can contact your subsidiary to find out whether the type of products and services described on this page are available in your area. Information about accessibility is also available in other languages.
Доступны разные способы индивидуальной настройки Visual Studio в соответствии с личным стилем и требованиями к разработке. Целый ряд параметров можно использовать в разных экземплярах Visual Studio — см. статью Синхронизация параметров в Visual Studio. В этой статье кратко описываются эти способы, а также приводятся ссылки на ресурсы с дополнительными сведениями.
Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Настройка интегрированной среды разработки Visual Studio для Mac.
Параметры по умолчанию
Можно выбрать заданную по умолчанию коллекцию параметров, которая оптимизирует Visual Studio для вашего типа разработки. Дополнительные сведения см. в статье Параметры среды.
Общие параметры среды
Доступ ко многим персонализированным параметрам можно также получить в диалоговом окне Параметры среды. Открыть это диалоговое окно можно двумя способами:
В строке меню выберите Сервис > Параметры и при необходимости разверните узел Среда.
Нажмите клавиши CTRL+Q, введите среда в поле поиска, а затем выберите Среда > Общие из результатов.
В открывшемся диалоговом окне "Параметры" нажмите клавишу F1 для получения справочных сведений о различных параметрах на этой странице.
Цветовые темы среды
Чтобы изменить цветовую тему на темную, светлую или синюю (простую или с дополнительным контрастом), в поле поиска введите тема и выберите Среда > Общие. В диалоговом окне Параметры измените значение настройки Цветовая тема.
Чтобы изменить параметры раскраски в редакторе, введите среда в поле поиска и выберите Среда > Шрифты и цвета. См. раздел Практическое руководство. Изменение шрифтов и цветов.
Регистр главного меню
Вы можете изменить регистр главного меню, выбрав вариант Заглавные буквы (например, "Файл") и ВСЕ ПРОПИСНЫЕ (например, "ФАЙЛ"). Введите среда в поле поиска, выберите Среда > Общие, а затем измените параметр Применить регистр заголовка к строке меню.
Настройка меню и панелей инструментов
Сведения о добавлении или удалении элементов меню или панели инструментов см. в статье Практическое руководство. Настройка меню и панелей инструментов.
Начальная страница
Сведения о создании настраиваемой начальной страницы для пользователя и команды см. в разделе Настройка начальной страницы.
Макеты окон
Можно определить и сохранить несколько макетов окон и переключаться между ними. Например, можно определить один макет для написания кода, а другой — для отладки. Сведения о расположении окон и упорядочивании их поведения, а также о сохранении пользовательских макетов см. в статье Настройка макетов окон.
Внешние инструменты
Вы можете настроить меню Сервис и запускать внешние средства. Дополнительные сведения см. в разделе Управление внешними инструментами.
В этой статье мы настроим цветовую тему Visual Studio. Мы также настроим цвета для двух различных типов текста в редакторе кода.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена темная тема. Далее рассмотрим, как изменить ее на другую цветовую тему.
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Общие.
В списке Цветовая тема выберите нужную тему: заданную по умолчанию темную тему, синюю тему, синюю тему с повышенной контрастностью или светлую тему. Также можно выбрать параметр Использовать настройки системы, чтобы выбрать тему, используемую в Windows.
При изменении цветовой темы шрифты текста и их размер в интегрированной среде разработки возвращаются к значениям по умолчанию или ранее настроенным значениям.
Требуется больше тем? Ознакомьтесь с широким набором настраиваемых тем в магазине Visual Studio Marketplace. Дополнительные сведения о примерах новых настраиваемых тем Visual Studio 2022 на основе VS Code см. в записи блога Новая коллекция тем Visual Studio.
Из этой статьи вы узнаете, как переключить синюю цветовую тему Visual Studio на темный режим. Мы также настроим цвета для двух различных типов текста в редакторе кода.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена синяя тема. Давайте изменим ее на тему Темная.
В строке меню, где расположены такие вкладки, как Файл и Правка, выберите Сервис > Параметры.
На странице параметров Среда > Общие измените значение параметра Цветовая тема на Темная и нажмите кнопку ОК.
Цветовая тема для всей среды разработки (IDE) Visual Studio изменяется на Темная.
Вы можете создать собственные темы, установив конструктор цветовых тем Visual Studio из Visual Studio Marketplace.
Из этой статьи вы узнаете, как переключить синюю цветовую тему Visual Studio на темный режим. Мы также настроим цвета для двух различных типов текста в редакторе кода.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена синяя тема. Давайте изменим ее на тему Темная.
В строке меню, где расположены такие вкладки, как Файл и Правка, выберите Сервис > Параметры.
На странице параметров Среда > Общие измените значение параметра Цветовая тема на Темная и нажмите кнопку ОК.
Цветовая тема для всей среды разработки (IDE) Visual Studio изменяется на Темная.
Вы можете выбрать дополнительные предопределенные темы, установив редактор цветовых тем Visual Studio из Visual Studio Marketplace. Когда вы установите это средство, в раскрывающемся списке Цветовая тема появятся дополнительные темы.
Изменение цветов текста в редакторе
Теперь настроим несколько цветов текста для редактора. Сначала создадим XML-файл, чтобы просмотреть цвета по умолчанию.
В строке меню выберите Файл > Создать > Файл.
В диалоговом окне Новый файл в разделе Общие выберите XML-файл и нажмите кнопку Открыть.
Вставьте приведенный ниже XML-код под строкой с .
Обратите внимание, что цвет номеров строк бирюзовый, а атрибутов XML (например id="bk101" ) — голубой. Давайте изменим цвет этих элементов.
Чтобы открыть диалоговое окно Параметры, в строке меню выберите Сервис > Параметры.
В разделе Среда выберите категорию Шрифты и цвета.
Обратите внимание, что в поле Показать параметры для указано значение Текстовый редактор,—именно это нам и нужно. Раскройте список, чтобы узнать, для каких еще элементов можно настроить шрифты и цвет текста.
Чтобы изменить цвет номера строки, в списке Отображение элементов выберите Номер строки. В поле Основной цвет элемента выберите Оливковый.
Некоторые языки имеют собственные параметры шрифтов и цветов. Если вы являетесь разработчиком на C++ и хотите изменить цвет, используемый для выделения функций, найдите элемент Функции C++ в списке Отображение элементов.
Прежде чем закрыть диалоговое окно, давайте также изменим цвет атрибутов XML. В списке Отображение элементов прокрутите вниз до элемента Атрибут XML и выберите его. В поле Основной цвет элемента выберите Травяной. Нажмите ОК, чтобы сохранить изменения и закрыть диалоговое окно.
Мы изучили только некоторые способы настраивать цвета в Visual Studio. Ознакомьтесь с другими возможностями в диалоговом окне Параметры, чтобы настроить Visual Studio в соответствии со своими предпочтениями.
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
- In VS Code, open the Color Theme picker with File >Preferences >Color Theme. (Code >Preferences >Color Theme on macOS).
- You can also use the keyboard shortcut ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T ) to display the picker.
- Use the cursor keys to preview the colors of the theme.
- Select the theme you want and press Enter .
The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).
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:
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:
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 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:
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" :
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 ) ). Open the . More Actions dropdown menu 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.
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
- In VS Code, open the File Icon Theme picker with File >Preferences >File Icon Theme. (Code >Preferences >File Icon Theme on macOS).
- You can also use the Preferences: File Icon Theme command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).
- Use the cursor keys to preview the icons of the theme.
- 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+, ) ).
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:
Читайте также: