Vs code настроить цвет интерфейса

Содержание
  1. Цветовые темы
  2. Выбор цветовой темы
  3. Цветовые темы из Marketplace
  4. Кастомизация цветовых тем
  5. Использование существующих тем TextMate
  6. Темы иконок
  7. Выбор темы значков файлов
  8. Создание собственной темы значков файлов
  9. Следующие шаги
  10. Практическое руководство. Изменение шрифтов, цветов и тем в Visual Studio
  11. Изменение цветовой темы
  12. Изменение шрифтов и размера текста
  13. Изменение шрифта и размера текста в интегрированной среде разработки
  14. Изменение шрифта и размера текста в редакторе
  15. Параметры специальных возможностей
  16. Использование высокой контрастности Windows
  17. Использование параметра дополнительной контрастности для Visual Studio
  18. Следующие шаги
  19. Как настроить оформление Visual Studio Code
  20. Готовые темы для Visual Studio Code
  21. Создание своей темы для VSCode
  22. Свои настройки оформления Visual Studio Code
  23. Общий принцип
  24. Оформление самого редактора
  25. «Подводные камни»
  26. Подсветка кода в VSCode

Цветовые темы

Цветные темы позволяют изменять цвет фона, текста и языка синтаксиса VS Code в соответствии с вашими предпочтениями и рабочей средой. VS Code поддерживает светлые, темные и высококонтрастные темы.

Выбор цветовой темы

Текущая цветовая тема сконфигурирована в настройках.

// Указывает цветовую тему, используемую в рабочей среде.

«workbench.colorTheme»: «Default Dark+»

Однако нет необходимости редактировать настройки напрямую. С помощью Color Theme Picker проще просмотреть и выбрать тему.

  1. Откройте панель выбора цветов в меню Файл > Настройки > Цветная тема . ( Код > Настройки > Цветная тема на Mac)
  2. Используйте клавиши курсора, чтобы просмотреть цвета темы.
  3. Выберите нужную тему и нажмите Enter .

Совет: По умолчанию тема настраивается в пользовательских настройках и применяется ко всем рабочим пространствам. Но вы также можете настроить тему для конкретной рабочей области. Для этого задайте тему в настройках рабочей области.

Цветовые темы из Marketplace

В VS Code есть несколько готовых цветовых тем, которые вы можете попробовать.

Читайте также:  Почему не работает ростелеком после оплаты

Сообщество добавило еще много тем, которые были добавлены сообществом VS Code Расширения Marketplace. Если вы найдете тот, который хотите использовать, установите его и перезапустите VS Code, и новая тема будет доступна.

Совет: Чтобы найти темы, введите ‘theme’ в поле поиска в расширениях ( Ctrl + Shift + X ).

Вы также можете напрямую просмотреть сайт VS Code Marketplace, чтобы найти доступные темы.

Кастомизация цветовых тем

Примечание: поддерживается в VS Code версии 1.12 или выше.

Вы также можете настроить свою активную цветовую тему с помощью пользовательской настройки workbench.colorCustomizations . Вы можете установить цвета элементов интерфейса VS Code, таких как список и деревья (проводник файлов, виджет предложений), редактор diff, панель активности, уведомления, полоса прокрутки, разделенный вид, кнопки и многое другое.

Вы можете использовать автодополнение при настройке значений workbench.colorCustomizations или, для списка всех настраиваемых цветов, см. Справочная информация по цвету.

Использование существующих тем TextMate

Вы можете добавить существующие цветовые темы TextMate (.tmTheme) в VS Code. Например, на сайте цвета Sublime есть сотни доступных тем TextMate. См. Добавление новой темы в раздел Расширение автозапуска.

Темы иконок

Темы значков файлов могут быть добавлены расширениями и выбраны пользователями как их любимый набор значков файлов. Значки файлов отображаются в Проводнике файлов и заголовках с вкладками.

Выбор темы значков файлов

Текущая тема значков файлов сохраняется в ваших пользовательских настройках.

// Указывает тему значка, используемую в рабочем месте.

Нет необходимости редактировать файл settings.json напрямую. Для просмотра и выбора темы лучше использовать элемент Значок темы.

  1. Откройте выбор значка темы с помощью Файл > Настройки > Значок значка файла . ( Код > Настройки > Тема значка файла на Mac)
  2. Используйте клавиши курсора для предварительного просмотра значков темы.
  3. Выберите нужную тему и нажмите Enter .

По умолчанию не установлен набор значков файлов, поэтому в Проводнике нет значков. После выбора темы значка выбранная тема будет запомнена и снова установлена, когда VS Code будет запущен в следующий раз.

VS Code поставляется с двумя темами значков: Minimal и Seti . Чтобы установить другие темы значков, выберите пункт Найти больше в Marketplace . в подборке тем для значков.

Вы также можете напрямую просмотреть сайт VS Code Marketplace, чтобы найти доступные темы.

Создание собственной темы значков файлов

Вы можете создать свою собственную тему значков файлов из значков (предпочтительно SVG), см. Раздел Добавление новой темы значка в разделе Создание расширений.

Следующие шаги

Темы — это всего лишь один способ настроить VS Code. Если вы хотите узнать больше о настройке и расширении VS Code, попробуйте следующие темы:

  • Настройки — Узнайте, как настроить VS Code в соответствии с вашими предпочтениями с помощью настроек пользователя и рабочей области.
  • Сниппеты — добавьте дополнительные сниппеты в ваш любимый язык.
  • Расширение Visual Studio Code — Узнайте о других способах расширения VS Code.
  • Темы, сниппеты и оформление — вы можете создавать темы, сниппеты и языковые настройки для использования в VS Code.

Источник

Практическое руководство. Изменение шрифтов, цветов и тем в Visual Studio

Шрифты и цвета в Visual Studio можно изменять различными способами. Например, вы можете изменить синюю тему по умолчанию на темную тему (так называемый «темный режим»). При необходимости вы также можете включить контрастную тему и изменить шрифт по умолчанию и размер текста в IDE в и редакторе кода.

Изменение цветовой темы

Изменить цветовую тему фрейма интегрированной среды разработки и окон инструментов в Visual Studio можно следующим образом:

В строке меню выберите Сервис > Параметры.

В списке параметров выберите Среда > Общие.

В списке Цветовая тема выберите тему по умолчанию Синяя, Светлая, Темная или Blue (Extra Contrast) (Синяя (дополнительный контраст)).

При изменении цветовой темы шрифты текста и их размер в интегрированной среде разработки возвращаются к значениям по умолчанию или ранее настроенным значениям.

Можно создавать и редактировать собственные темы Visual Studio, установив редактор цветовых тем для Visual Studio 2017.

Чтобы создавать и редактировать собственные темы Visual Studio, можно установить конструктор цветовых тем Visual Studio.

Изменение шрифтов и размера текста

Шрифт и размер текста можно изменить для всех окон фреймов IDE и инструментов или только для определенных окон и текстовых элементов. Кроме того, шрифт и размер текста можно изменить в редакторе.

Изменение шрифта и размера текста в интегрированной среде разработки

В строке меню выберите Сервис > Параметры.

В списке параметров выберите Среда > Шрифты и цвета.

В списке Показать параметры для выберите Среда.

Если требуется изменить шрифт только для окон инструментов, в списке Параметры для выберите Все окна текстовых инструментов.

Чтобы изменить шрифт и размер текста для интегрированной среды разработки, измените значения параметров Шрифт и Размер.

Выберите соответствующий элемент в области Отображаемые элементы и затем измените параметры Основной цвет элемента и Фоновый цвет элемента.

Изменение шрифта и размера текста в редакторе

В строке меню выберите Сервис > Параметры.

В списке параметров выберите Среда > Шрифты и цвета.

В списке Показать параметры для выберите Текстовый редактор.

Чтобы изменить шрифт и размер текста для редактора, измените значения параметров Шрифт и Размер.

Выберите соответствующий элемент в области Отображаемые элементы и затем измените параметры Основной цвет элемента и Фоновый цвет элемента.

Параметры специальных возможностей

При слабом зрении можно использовать специальные параметры цветовой темы. Параметр высокой контрастности можно использовать для всех приложений и пользовательского интерфейса на компьютере. Дополнительный параметр контрастности также можно использовать только для Visual Studio.

Использование высокой контрастности Windows

Чтобы переключить режим высокой контрастности Windows, используйте одну из следующих процедур:

В Windows или любом приложении Майкрософт нажмите сочетание клавиш Левая клавиша ALT+Левая клавиша SHIFT+PRTSCN.

В ОС Windows последовательно выберите Пуск > Параметры > Специальные возможности > Высокая контрастность.

Параметр высокой контрастности 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 не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:

  • orta.io/vscode-themes — здесь большие скриншоты всех тем на одной странице.
  • vscodethemes.com — здесь темы уже сгруппированы на светлые и тёмные, а также доступен предпросмотр для 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 изменения сразу же вступают в силу.

«Подводные камни»

Некоторые расширения могут перекрывать ваши настройки. Я столкнулся с тем, что например расширение Git (сейчас это стандартное расширение, доступное в общих настройках), изменяет цвет списка файлов. То есть я указываю цвет #000000, но он принудительно меняет их на малоконтрастный серый. В данном случае Git нашёл существующий репозиторий и решил, что изменения не заcommit’чены. Настройки оформления для Git’а другие (они есть в документации). Поэтому, если какой-то параметр вдруг не работает, то возможно его перебивает какое-то расширение.

Если расширение не нужно, то его можно просто отключить (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 под любые «капризы». 🙂

Источник

Оцените статью