Цветовая схема visual studio 2019
В 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 . После сохранения файла, изменения будут сразу же видны в коде.
Подсказка. Удобно разделить окна редактора VSCode, чтобы в одном был исходный php-код, а в другом settings.json .
Таким вот нехитрым способом можно настроить Visual Studio Code под любые «капризы». :-)
Шрифты и цвета в 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 на темный режим. Мы также настроим цвета для двух различных типов текста в редакторе кода.
В Visual Studio 2022 мы обновили функции цветовых тем, чтобы они соответствовали вашим настройкам Windows. Дополнительные сведения см. в записи блога Гибкие возможности тематики для Visual Studio.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена тема Синяя. Давайте изменим ее на тему Темная.
В строке меню, где расположены разделы Файл и Изменить, выберите Средства > Параметры.
Откройте страницу параметров Окружение > Общие, измените значение Цветовая тема на Темная и щелкните ОК.
Цветовая тема для всей среды разработки (IDE) Visual Studio изменяется на Темная.
Вы можете выбрать дополнительные предопределенные темы, установив редактор цветовых тем Visual Studio из Visual Studio Marketplace. Когда вы установите это средство, в раскрывающемся списке Цветовая тема появятся дополнительные темы.
Вы можете создать собственные темы, установив конструктор цветовых тем Visual Studio из Visual Studio Marketplace.
Требуется больше тем? Ознакомьтесь с широким набором настраиваемых тем в магазине Visual Studio Marketplace. Дополнительные сведения о примерах новых настраиваемых тем Visual Studio 2022 на основе VS Code см. в записи блога Новая коллекция тем Visual Studio.
Изменение цветов текста в редакторе
Теперь настроим несколько цветов текста для редактора. Сначала создадим XML-файл, чтобы просмотреть цвета по умолчанию.
В строке меню выберите Файл > Создать > Файл.
В диалоговом окне Новый файл в разделе Общие выберите XML-файл и нажмите кнопку Открыть.
Вставьте приведенный ниже XML-код под строкой с <?xml version="1.0" encoding="utf-8"?> .
Обратите внимание, что цвет номеров строк бирюзовый, а атрибутов XML (например id="bk101" ) — голубой. Давайте изменим цвет этих элементов.
Чтобы открыть диалоговое окно Параметры, в строке меню выберите Сервис > Параметры.
В разделе Среда выберите категорию Шрифты и цвета.
Обратите внимание, что в поле Показать параметры для указано значение Текстовый редактор,—именно это нам и нужно. Раскройте список, чтобы узнать, для каких еще элементов можно настроить шрифты и цвет текста.
Чтобы изменить цвет номера строки, в списке Отображение элементов выберите Номер строки. В поле Основной цвет элемента выберите Оливковый.
Некоторые языки имеют собственные параметры шрифтов и цветов. Если вы являетесь разработчиком на C++ и хотите изменить цвет, используемый для выделения функций, найдите элемент Функции C++ в списке Отображение элементов.
Прежде чем закрыть диалоговое окно, давайте также изменим цвет атрибутов XML. В списке Отображение элементов прокрутите вниз до элемента Атрибут XML и выберите его. В поле Основной цвет элемента выберите Травяной. Нажмите ОК, чтобы сохранить изменения и закрыть диалоговое окно.
Мы изучили только некоторые способы настраивать цвета в Visual Studio. Ознакомьтесь с другими возможностями в диалоговом окне Параметры, чтобы настроить Visual Studio в соответствии со своими предпочтениями.
Осторожно, много гифок.
Улучшения инструментов
Как вам новые цвета от Roslyn? Цвета Visual Studio Code получили высокую оценку, поэтому мы включили аналогичные цветовые схемы в Visual Studio. Ваш редактор кода стал теперь немного красочнее. Ключевые слова, пользовательские методы, локальные переменные, имена параметров и перегруженные операторы получили новые цвета. Вы даже можете настроить цвета для каждой классификации синтаксиса, перейдя в Tools > Options > Environment > Fonts and Colors и прокрутив до «User Members».
В нижней части файла, в вашем редакторе, находятся индикаторы работоспособности документа, а также значок очистки кода. Индикаторы работоспособности документа позволяют сразу узнать, сколько ошибок и предупреждений присутствует в файле, который вы сейчас открыли. Вы можете нажать на значок очистки кода, чтобы применить правила стиля кода, указанные в Tools > Options, или, если у вас есть файл editorconfig, который предписывает использование одного стиля кода в вашей команде, VS применит стили, указанные в этом файле.
Вы можете редактировать файлы проектов типа SDK простым двойным щелчком мыши. Вы также можете просматривать эти файлы в виде превью в навигации GoToAll (Ctrl+t) и искать содержимое для ссылок на файлы.
Загрузите подмножество проектов в ваше решение с помощью фильтрованных решений! Теперь вы можете выгрузить проекты и сохранить .slnf-файл, который откроет только указанные вами проекты. Это поможет вам быстро получить интересующий вас код без необходимости загрузки всего решения.
Найдите все ссылки, классифицируемые по типу ссылки. Вы можете выполнять фильтрацию по чтению/записи в новом столбце «Kind» в окне поиска всех ссылок.
Запустите форматирование стиля кода по всему решению в командной строке с помощью глобального инструмента dotnet format.
Visual Studio Code от Microsoft, возможно, является одним из лучших редакторов кода. Благодаря обширной коллекции расширений, поддерживаемых сообществом, вы можете использовать VS Code для удовлетворения почти всех ваших потребностей в программировании.
Приложение доступно в Windows, macOS и Linux, что делает его идеальной программой для написания кода независимо от операционной системы. Одним из ключевых аспектов VS Code является его настраиваемость и надежные возможности создания тем.
Мы связали все темы, представленные в этой статье. Все, что вам нужно сделать, это кликнуть ссылки, чтобы посетить Visual Studio Marketplace, и нажать кнопку «Установить».
После установки вы можете переключаться между темами с помощью сочетания клавиш Ctrl + K Ctrl + T или перейти в Файл -> Настройки -> Цветовая тема.
Вы также можете искать эти темы в разделе «Расширения» VS Code.
1. Ariake Dark
Цветовая схема в этой теме выглядит хорошо без ущерба для читабельности и подсветки синтаксиса. Создатель темы рекомендует использовать шрифт Fira Code (вы можете изменить шрифт в меню Файл -> Настройки -> Настройки -> Текстовый редактор -> Шрифт -> Семейство шрифтов) для достижения наилучших результатов.
2. Pink pine
Pink pine придает VS Code уютную атмосферу и элегантный вид. Тема поставляется с соответствующей темой значков, которую вы можете выбрать в меню «Файл» -> «Настройки» -> «Тема значка файла», если хотите.
Вы получаете две дополнительные темы, а именно Rosé Pine Dawn и Rosé Pine Moon, с разными цветами фона, сохраняя при этом верную цветовую схему.
3. Celestial
Вы можете попробовать Horizon (прокрутите вниз до шестой темы в этом списке), если вам не нужен такой темный фон, но вам нравится используемая здесь цветовая схема.
4. В постели до 19:00.
Как следует из названия, эта тема лучше всего подходит для тех, кто не часто ложится допоздна на сеансы программирования. Эта тема имеет отличные уровни контрастности, чтобы помочь вам легко различать различные элементы в коде.
Примечание: есть проблемы со сном? Ознакомьтесь с нашими любимыми приложениями ASMR, которые помогут вам заснуть.
5. ReUI
Если вы ищете тему VS Code, скорее всего, вы хотя бы раз посетили официальный сайт React JS. Если вам нравится цветовая палитра, используемая во фрагментах кода веб-сайта React, тема ReUI переносит ее в VS Code. В результате получилась эстетическая тема с приятными для глаз цветами.
6. Горизонт
Кроме того, разработчик дал несколько рекомендаций по настройке контрастности, удалению курсива и серых скобок в списке темы, чтобы настроить тему в соответствии с вашими предпочтениями.
7. Night Owl
8. Andromeda
9. Nord
Тема Nord VS Code основана на цветовой палитре Nord от Arctic Ice Studio, вдохновленной красотой Арктики.
Одна примечательная часть Nord заключается в том, что его цветовая схема распространяется даже на популярные сторонние расширения синтаксиса, чтобы предложить вам унифицированный опыт.
Если вам нравятся минимальные настройки, вам, вероятно, понравится эта тема. Однако при ярком освещении он может выглядеть слишком бледным.
10. Tokyo Night
Тема поставляется в комплекте с двумя дополнительными вариантами, а именно Tokyo Night Light и Tokyo Night Storm. В листинге темы разработчик рекомендует отключить выделение семантического синтаксиса в настройках для достижения наилучших результатов.
Существуют также конфигурации для отключения курсива, увеличения яркости текста Codelens и настройки активных и неактивных границ.
11. Mayukai Mirage
Mayukai Mirage черпает вдохновение из нескольких других тем VS Code, включая тему Ayu, тему Material, Monokai, Andromeda и Gruvbox Darktooth.
По словам создателя, эта тема идеально подходит для дневной работы над программированием. Существует семь различных вариантов Mayukai, включая Mirage, Semantic Mirage, Dark, Mirage Gruvbox Darktooth, Mono, Alucard и Sunset.
12. One Dark Pro
До того, как VS Code стал массовым, редактор кода Atom был предпочтительным выбором многих разработчиков, и нельзя отрицать, что тема Atom One Dark выглядит великолепно.
13. LaserWave
Если вы ищете тему, которая не является темной и хорошо сочетается с вашим плейлистом lo-fi, вы не ошибетесь с LaserWave. У него уникальное ощущение, и оно вам обязательно понравится.
14. Даркула
Даркула (не путать с популярным Дракула Официальный) переносит знакомую тему Darcula, которую можно увидеть в IDE Jetbrains и Android Studio, в VS Code.
Тем не менее, создатель указывает, что есть несколько модификаций, которые должны улучшить работу программистов.
Вы можете использовать эту тему для унифицированного взаимодействия, если используете предложения IDE Jetbrains.
15. Огни большого города
Пока вы пробуете эту тему, убедитесь, что вы не пропустите пакет значков City Lights с более чем 60 значками типов файлов. Он также доступен для других популярных редакторов кода, таких как Sublime Text и Atom.
16. Quiet Light
Тема поддерживает HTML / CSS / LESS / SCSS, JavaScript, PHP, Python, Markdown и другие. Если вам нравится тема Quiet Light по умолчанию, скорее всего, она вам понравится.
17. Тема GitHub
18. Light Pro
Brackets Light Pro переносит светлую тему редактора кода Adobe Brackets в VS Code. Если вы переходите на VS Code из Brackets, поскольку Adobe готова прекратить поддержку Brackets с 1 сентября 2021 года, вам понравится использовать тему Brackets Light Pro.
19. Aofuji Light
Если вы предпочитаете светлые темы, вы можете попробовать Aofuji Light, чтобы убедиться, что он идеально вписывается в ваш рабочий процесс.
20. Bluloco Light
Наконец, у нас есть тема Bluloco Light. Это форк темы One Light с приятной визуально цветовой палитрой Bluloco. Эта тема выглядит хорошо, даже если у вас включен режим Apple NightShift, по словам создателя. Это означает, что тема хорошо сочетается с фильтром синего света.
Это наш выбор из лучших тем Visual Studio Code. Мы надеемся, что эта статья поможет вам выбрать новую тему и придаст общий вид вашей настройке кодирования.
Итак, какая из этих тем Visual Studio Code вам нравится больше всего? Дайте нам знать в комментариях ниже. Кроме того, если вы используете тему, которую мы не упомянули, но которая должна быть в списке, не стесняйтесь поделиться ею с другими в комментариях.
Читайте также: