Как сделать фон в visual studio
Практическое руководство. Изменение шрифтов, цветов и тем в Visual Studio
Шрифты и цвета в Visual Studio можно изменять различными способами. Например, можно изменить заданную по умолчанию темную тему (также называемую "темным режимом") на светлую тему, синюю тему, тему с дополнительным контрастом или тему, которая соответствует вашим параметрам системы. Также можно изменить шрифт по умолчанию и размер текста в IDE в и редакторе кода.
Ознакомьтесь с записью блога Обновленный пользовательский интерфейс Visual Studio 2022, чтобы получить дополнительные сведения о корректировках коэффициента контрастности цвета и о новом шрифте Cascadia Code, который мы добавили, чтобы сделать среду Visual Studio более доступной, чем когда-либо ранее.
Шрифты и цвета в Visual Studio можно изменять различными способами. Например, вы можете изменить синюю тему по умолчанию на темную тему (так называемый "темный режим"). При необходимости вы также можете включить контрастную тему. и изменить шрифт по умолчанию и размер текста в IDE в и редакторе кода.
Изменение цветовой темы
Изменить цветовую тему фрейма интегрированной среды разработки и окон инструментов в Visual Studio можно следующим образом:
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Общие.
В списке Цветовая тема выберите тему по умолчанию Синяя, Светлая, Темная или Blue (Extra Contrast) (Синяя [дополнительный контраст]).
Можно также выбрать тему, используемую Windows, выбрав параметр Использовать системные настройки.
При изменении цветовой темы шрифты текста и их размер в интегрированной среде разработки возвращаются к значениям по умолчанию или ранее настроенным значениям.
Требуется больше тем? Ознакомьтесь с широким набором настраиваемых тем в магазине Visual Studio Marketplace. Дополнительные сведения о примерах новых настраиваемых тем Visual Studio 2022 на основе VS Code см. в записи блога Новая коллекция тем Visual Studio.
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Общие.
В списке Цветовая тема выберите тему по умолчанию Синяя, Светлая, Темная или Blue (Extra Contrast) (Синяя (дополнительный контраст)).
При изменении цветовой темы шрифты текста и их размер в интегрированной среде разработки возвращаются к значениям по умолчанию или ранее настроенным значениям.
Можно создавать и редактировать собственные темы Visual Studio с помощью соответствующего расширения. Выберите один из следующих двух вариантов в зависимости от используемой версии Visual Studio:
Изменение шрифтов и размера текста
Шрифт и размер текста можно изменить для всех окон фреймов IDE и инструментов или только для определенных окон и текстовых элементов. Кроме того, шрифт и размер текста можно изменить в редакторе.
Изменение шрифта и размера текста в интегрированной среде разработки
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Шрифты и цвета.
В списке Показать параметры для выберите Среда.
Если требуется изменить шрифт только для окон инструментов, в списке Параметры для выберите Все окна текстовых инструментов.
Чтобы изменить шрифт и размер текста для интегрированной среды разработки, измените значения параметров Шрифт и Размер.
Выберите соответствующий элемент в области Отображаемые элементы и затем измените параметры Основной цвет элемента и Фоновый цвет элемента.
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Шрифты и цвета.
В списке Показать параметры для выберите Среда.
Если требуется изменить шрифт только для окон инструментов, в списке Параметры для выберите Все окна текстовых инструментов.
Чтобы изменить шрифт и размер текста для интегрированной среды разработки, измените значения параметров Шрифт и Размер.
Выберите соответствующий элемент в области Отображаемые элементы и затем измените параметры Основной цвет элемента и Фоновый цвет элемента.
Изменение шрифта и размера текста в редакторе
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Шрифты и цвета.
В списке Показать параметры для выберите Текстовый редактор.
Чтобы изменить шрифт и размер текста для редактора, измените значения параметров Шрифт и Размер.
Выберите соответствующий элемент в области Отображаемые элементы и затем измените параметры Основной цвет элемента и Фоновый цвет элемента.
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Шрифты и цвета.
В списке Показать параметры для выберите Текстовый редактор.
Чтобы изменить шрифт и размер текста для редактора, измените значения параметров Шрифт и Размер.
Выберите соответствующий элемент в области Отображаемые элементы и затем измените параметры Основной цвет элемента и Фоновый цвет элемента.
Параметры специальных возможностей
При слабом зрении можно использовать специальные параметры цветовой темы. Параметр высокой контрастности можно использовать для всех приложений и пользовательского интерфейса на компьютере. Дополнительный параметр контрастности также можно использовать только для Visual Studio.
Использование высокой контрастности Windows
Чтобы переключить режим высокой контрастности Windows, используйте одну из следующих процедур:
В Windows или любом приложении Майкрософт нажмите сочетание клавиш Левая клавиша ALT+Левая клавиша SHIFT+PRTSCN.
В ОС Windows последовательно выберите Пуск > Параметры > Специальные возможности. Затем в разделе Зрение в Windows 10 и более поздних версиях выберите Высокая контрастность.
Параметр высокой контрастности Windows влияет на все приложения и пользовательский интерфейс на компьютере.
Использование параметра дополнительной контрастности для Visual Studio
Чтобы переключить режим дополнительной контрастности в Visual Studio, используйте следующие процедуры:
В строке меню Visual Studio последовательно выберите Сервис > Параметры, а затем в списке параметров выберите Среда > Общая.
В раскрывающемся списке Цветовая тема выберите тему Blue (Extra Contrast) (Синий (дополнительный контраст)), а затем нажмите кнопку ОК.
Дополнительные сведения о других доступных параметрах специальных возможностей Visual Studio см. в этой статье.
Если вам требуется параметр специальных возможностей для цветов или шрифтов, но в настоящее время в Visual Studio он недоступен, сообщите нам, выбрав раздел Предложить функцию на странице сообщества разработчиков Visual Studio. Дополнительные сведения об этом форуме и возможностях его использования см. в статье Предложить функцию для Visual Studio.
Следующие шаги
Дополнительные сведения о всех элементах пользовательского интерфейса, для которых можно изменить шрифт и цветовые схемы, см. в этой статье.
Как настроить оформление Visual Studio Code
В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.
Прежде, чем рассмотреть все эти варианты, я отмечу, что VSCode может хранить настройки не только глобально для всего редактора, но и локально: для выбранной папки или для рабочей области. Однажды я установил какое-то расширение, которое поменяло цвет оформления на болотно-грязный, и потом полдня потратил на то, как его отключить. Оказалось, что цвет прописался в конфигурации папки. 🙂
Готовые темы для Visual Studio Code
Здесь всё очень просто: все темы устанавливаются с официального сайта: Marketplace. На странице темы есть ссылка Install , нажав на которую, откроется сам VSCode, где и выбирается установка.
Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.
В Marketplace не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:
-
— здесь большие скриншоты всех тем на одной странице. — здесь темы уже сгруппированы на светлые и тёмные, а также доступен предпросмотр для HTML/JS/CSS-кода.
Если тема не понравилась, то её можно удалить во включенных расширениях. Готовые темы удобны тем, что это самый быстрый и простой способ установки — буквально в пару кликов.
Создание своей темы для VSCode
При желании можно создать и свою тему. Для этого нужно воспользоваться он-лайн редактором TmTheme Editor. Вначале лучше выбрать из галереи какой-то подходящий вариант, после его отредактировать. После того, как настройки выполнены, нужно скачать файл (кнопка Download ). Это будет файл с расширением .tmTheme .
После этого нужно создать расширение для этой темы. Идём в каталог c:\Users\ЮЗЕР\.vscode\extensions\ , где VSCode хранит все установленные расширения. Делаем там каталог «my.themу», в который размещаем файл package.json такого содержания:
Название, версию можно поменять на свою. Параметр path указывает на tmTheme-файл. Его мы скачали с TmTheme Editor — нужно его переименовать в my.tmTheme . Делаем подкаталог themes и кидаем в него этот файл.
Параметр uiTheme указывает на базовый UI — в данном примере «vs» означает светлую тему. Если вы используется темную, то нужно указать «vs-dark».
После этого в Visual Studio Code переключаемся на вкладку расширений и включаем его.
Если вы решите изменить какой-то цвет в TmTheme Editor, то скачиваете новый файл и заменяете им my.tmTheme . Чтобы изменения вступили в силу, можно выключить расширение и опять его включить.
Свои настройки оформления Visual Studio Code
Лично я предпочитаю светлые темы оформления, хотя тёмные выглядят красивей, поскольку цвет на темном фоне лучше различим. Для меня проблема в том, что приходится постоянно переключаться с редактора на сайт в браузере и мельтешение «тёмное-светлое» довольно сильно раздражает. Поэтому, чтобы не насиловать глаза, я использую светлое оформление.
У готовых светлых тем существенный недостаток — низкий контраст цветов на белом фоне. Из-за этого подобрать нормальный цвет не такое простое занятие. Например многие используют светло-серый цвет текста: выгладит красиво, но для зрения получается слишком малый контраст. Другие, наоборот, ставят насыщенные цвета: синий, красный — для нас они несут ещё и смысловой оттенок, поэтому их нужно подбирать с умом. В общем, если вы такой же капризный как я, 🙂 то самым лучшим способом будет собственная настройка оформления VSCode. И делается это, на самом деле, достаточно просто.
Общий принцип
Все настройки хранятся как обычно в settings.json . Visual Studio Code разделяет оформление самого редактора от цветовой схемы подсветки кода. Сам редактор настраивается в очень широких пределах — изменить можно буквально каждый элемент дизайна.
В settings.json нужно сделать секцию workbench.colorCustomizations , в которой указываются изменяемые параметры. Это «глобальное оформление», которое перекроет оформление любой темы.
Оформление самого редактора
Я использую стандартную тему оформления Visual Studio Light и секция workbench.colorCustomizations у меня такая:
Параметр foreground задаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color.
После сохранения settings.json изменения сразу же вступают в силу.
«Подводные камни»
Если расширение не нужно, то его можно просто отключить (enable).
Подсветка кода в VSCode
Теперь самое интересное. Для изменения подсветки кода, используется секция editor.tokenColorCustomizations . В ней указывается тема оформления, для которой нужно внести изменения. То есть настройки применятся только, если будет выбрана эта тема.
Покажу на примере:
Здесь выбрана тема «Visual Studio Light». Секция textMateRules как раз и содержит оформление для каждого элемента, который задаётся в параметре scope . Само же оформление задается в параметре settings .
Если оформление для разных элементов одно и тоже, то в scope можно их перечислить через запятую, например так (здесь два элемента):
Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию.
Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter .
После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента.
Здесь указывается текущее оформление. Строчка:
показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:
Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php.
Если нужно изменить элемент, достаточно скопировать его из этой информации и вставить в settings.json . После сохранения файла, изменения будут сразу же видны в коде.
Таким вот нехитрым способом можно настроить Visual Studio Code под любые «капризы». 🙂
Уроки программирования, алгоритмы, статьи, исходники, примеры программ и полезные советы
Поменять тему в Visual Studio
Ознакомившись с этим материалом, вы узнаете как поменять тему в Visual Studio.
в Visual Studio SDK визуализации и моделирования можно задать фоновое изображение для созданного конструктора с помощью пользовательского кода.
Настройка фонового изображения
Установка фонового изображения для сгенерированного конструктора
Скопируйте файл изображения, который будет использоваться в качестве фона схемы, в каталог Dsl\Resources текущего проекта.
В Обозреватель решений щелкните правой кнопкой мыши папку дсл\ресаурцес, наведите указатель на пункт Добавить и выберите пункт существующий элемент.
В диалоговом окне Добавление существующего элемента перейдите к папке дсл\ресаурцес.
В списке тип файлов выберите файлы изображений.
Щелкните файл образа, скопированный в каталог, и нажмите кнопку Добавить.
Щелкните правой кнопкой мыши элемент DSL и выберите пункт Свойства , чтобы открыть свойства проекта DSL.
На вкладке ресурсы щелкните этот проект не содержит файл ресурсов по умолчанию. Щелкните здесь, чтобы создать его.
Добавьте файл изображения в файл ресурсов, перетащив изображение из Обозреватель решений в окно ресурсы.
Откройте меню "Файл" и выберите параметр для сохранения свойств проекта.
Убедитесь, что файл Dsl\Properties\Resources.resx существует и под ним есть файл Resources.Designer.cs.
Если Resources. Designer. CS отсутствует, щелкните файл Resources. resx в Обозреватель решений.
В окне Свойства присвойте свойству Custom Tool значение ResXFileCodeGenerator .
В Обозреватель решений щелкните правой кнопкой мыши проект DSL, наведите указатель на пункт Добавить и выберите пункт создать папку.
Присвойте папке имя Custom.
Щелкните правой кнопкой мыши пользовательскую папку, наведите указатель на пункт Добавить и выберите пункт новый элемент.
В диалоговом окне Добавление нового элемента в списке шаблоны щелкните файл кода.
В поле имя введите BackgroundImage.cs и нажмите кнопку добавить.
Скопируйте указанный ниже код в файл BackgroundImage.cs, изменив пространство имен, имя класса схемы и имя ресурса файла изображения.
Замените "MyDiagramClass" на имя частичного класса схемы, определенное в файле Dsl\GeneratedCode\Diagrams.cs. Узнать правильное пространство имен можно также с помощью файла Dsl\GeneratedCode\Diagrams.cs.
Дополнительные сведения о настройке модели с помощью программного кода см. в разделе Навигация и обновление модели в программном коде.
См. также раздел
Компонент Text Template Transformation (Преобразование текстовых шаблонов) автоматически устанавливается как часть рабочей нагрузки разработки расширений Visual Studio. Его также можно установить на вкладке Отдельные компоненты Visual Studio Installer в категории Пакеты SDK, библиотеки и платформы. Установите компонент Пакет SDK для моделирования со вкладки Отдельные компоненты.
Задайте изображение экрана-заставки и цвет фона для вашего приложения с помощью Microsoft Visual Studio.
Задание изображения экрана-заставки и цвета фона с помощью Visual Studio
Если для создания приложения используется шаблон Visual Studio, изображение по умолчанию добавляется в проект и задается как изображение экрана-заставки. Цвет фона для экрана-заставки по умолчанию светло-серый. Чтобы изменить стандартное изображение или цвет экрана-заставки вашего приложения:
Откройте существующий проект универсальной платформы Windows (UWP) в Visual Studio.
В средстве Обозреватель решений откройте файл Package.appxmanifest. Вы также можете открыть этот файл в строке меню, выбрав Project>StoreEdit>App Manifest.
Перейдите на вкладку Визуальные ресурсы и выберите Экран-заставка в области Все визуальные ресурсы в левой части окна Package.appxmanifest. Если вы впервые изменяете экран-заставку, вы увидите путь "Assets\SplashScreen.jpg" в поле "Экран-заставка ".
На следующем снимке экрана показано окно Package.appxmanifest в Visual Studio. Доступный вам набор визуальных ресурсов может несколько отличаться в зависимости от типа проекта.
Если открыть Package.appxmanifest в текстовом редакторе, элемент SplashScreen отображается как дочерний элемент элемента VisualElements. Ниже показано, как разметка экрана-заставки, используемого по умолчанию, в файле манифеста выглядит в текстовом редакторе.
Чтобы выбрать новое изображение экрана-заставки для приложения UWP, нажмите кнопку с многоточием, которая отображается рядом с меткой 1240 x 600 пикселей под областью Масштабированные активы. Выберите изображение размером 1240 x 600 пикселей (с расширением PNG, JPG или JPEG), которое вы бы хотели использовать в качестве экрана-заставки.
Важно Выбранное изображение экрана-заставки должно составлять 620 x 300 пикселей с помощью коэффициента масштабирования 1x. Кроме того, при разработке экрана-заставки обратите внимание, что экран-заставка меньше экрана и расположен по центру. Экран-заставка не заполняет экран, как это делает экран-заставка приложения Магазина Windows Phone.
Чтобы выбрать новое изображение экрана-заставки для приложения Магазина Windows Phone, нажмите кнопку с многоточием, которая отображается рядом с меткой 1152 x 1920 пикселей под областью Масштабированные активы. Выберите изображение размером 1152 x 1920 пикселей (с расширением PNG, JPG или JPEG), которое вы бы хотели использовать в качестве экрана-заставки.
Важно Выбранное изображение экрана-заставки должно составлять 1152 x 1920 пикселей, что является правильным размером для коэффициента масштабирования 2,4x. Если это единственный ресурс, который вы предоставляете, то он будет масштабироваться в сторону уменьшения для коэффициентов масштабирования 1,4x и 1x.
Сводка и дальнейшие действия
Если ваше приложение загружается медленно, рекомендуется добавить расширенный экран-заставку. Пошаговое руководство см. в статье Создание настраиваемого экрана-заставки.
Уроки программирования, алгоритмы, статьи, исходники, примеры программ и полезные советы
Как поменять цвет фона элементов в Windows Forms
В данной статье мы разберем несколько вариантов изменения цвета элементов Windows Forms на примере фона формы Form1 и прочих компонентов.
Способ №1. Изменение цвета в свойствах элемента.
Для многих это самый легкий способ изменения цветовой палитры элементов, так как не надо писать код, всё визуализировано и интуитивно понятно.
Для этого надо выбрать элемент формы (или саму форму) и в «Свойствах» найти вкладку «Внешний вид». Нас интересует строка BackColor:
Здесь имеется большое количество цветовых схем и их визуальных представлений.
Выберем для примера какой-либо из цветов, чтобы изменить фон формы:
Легко, незамысловато, понятно.
Следующие способы будут производиться в коде.
Способ №2. Изменение цвета, используя структуру Color.
Это самый простой способ среди кодовых вариаций.
«На пальцах» это выглядит так:
Если мы захотим закрасить фон формы в зеленый цвет, то строка кода будет выглядеть вот так:
При запуске форма будет выглядеть так:
Если понадобится изменить цвет, например, кнопки Button на тёмно-бордовый, код будет таким:
Данный способ прост тем, что требуется лишь написать название цвета, которых также большое количество.
Зачастую этих двух способов хватает для оформления программы. Если же нужна более гибкая настройка или же среди стандартных цветов не имеется необходимых, можно воспользоваться способами, описанными ниже.
Способ №3. Изменение цвета, используя метод Color.Argb.
Этот и следующий методы позволят генерировать нужный цвет, используя значения цветового канала RGB.
RGB — это цветовая модель, которая синтезирует цвета, используя смешивание трёх основных цветов (Красного — Red, Зеленого — Green, Синего- Blue) с чёрным, вследствие чего получаются новые цвета и оттенки. Зависит получаемый цвет от интенсивности этих трёх основных цветов. Если смешать Красный, Зеленый и Синий в максимальной насыщенности, получится белый цвет. Если не смешивать их, то остаётся чёрный.
Данный способ позволяет регулировать интенсивность трех этих цветов, при смешивании которых и получится нужный нам оттенок.
Интенсивность в числовой форме для удобства применения обозначается от 0 (минимальная интенсивность) до 255(максимальная интенсивность). Все три цвета можно «варьировать» по этой шкале.
Словесно это выглядит вот так:
Названиеэлементаформы.BackColor = Color.FromArgb(Насыщенность красного, Насыщенность зеленого, Насыщенность синего);
Чтобы закрасить фон программы в чёрный цвет, используя данный метод, надо написать вот такую строку:
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:
Читайте также: