Как изменить тему в vs code

Изменение внешнего вида (темы) visual studio

В общем при гуглении различных тем для изменения внешнего вида IDE (пример ниже на фото, но это вроде Atom или Visual Code) в интернете можно найти только различные темы для Visual Studio Code. Знаю, что можно вручную устанавливать различные цвета для текста, но можно ли в VS менять разные темы (кроме светлой и темной) так же автоматически, как в VSCode или Atom и если да, то где их найти и как установить? P.S. Если не совсем понятно что за темы для VSCode то вот пример сайта с ними — vscodethemes.com

Отслеживать
задан 4 апр 2022 в 15:38
449 2 2 серебряных знака 14 14 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нажмите на кнопку «Средства», потом «Параметры», потом выберите тему, которая Вам нравится.

Отслеживать
ответ дан 4 апр 2022 в 15:48
Alex_Programmer_WPF Alex_Programmer_WPF
1 2 2 бронзовых знака
.. можно ли в VS менять разные темы (кроме светлой и темной. ) .
4 апр 2022 в 16:02
Да. Там кроме темной и светлой темы есть синяя и синий (дополнительный контраст)
4 апр 2022 в 16:05
отредактировал вопрос чтобы было понятно
4 апр 2022 в 16:07

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как адаптировать тему VS Code под себя?

Скажите пожалуйста как можно адаптировать (изменить) под себя уже установленную тему VS Code из маркета.

Например, нравятся темы Cobalt2 и Night Owl, но хотелось бы несколько изменить подсветку синтаксиса, а именно сделать подсветку тегов красным цветом. Можно ли внести подобные изменения в тему и пересохранить для дальнейшего использования? И если можно, то как это сделать? )

• Вопрос задан 31 авг. 2023
• 173 просмотра

Комментировать
Решения вопроса 1

0xC0000005

Вы можете создать свою тему: https://themes.vscode.one (не реклама), или пройти по пути: ~/.vscode/extensions, найти вашу тему, зайти в themes (папка), и открыть нужную тему для редактирования. А там можете менять цвета как хотите. И еще лучше сделайте копию перед редактированием.

Ответ написан 31 авг. 2023

Golden Boy @Golden_Boy Автор вопроса

Спасибо большое! Видимо, придется прибегнуть ко второму варианту, т.к. themes.vscode.one вроде как не позволяет изменить имеющуюся тему, лишь создать ее с нуля

Golden Boy, на сайте можно изменять темы, но только те которые залиты на сайт, и конечно создать с нуля

Golden Boy @Golden_Boy Автор вопроса

0xC0000005, да, это я уже понял, но создавать с нуля — это долго, а мне бы просто внести правки в любимые популярные темы )

Персонализация интегрированной среды разработки и редактора Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

В этой статье показано, как изменить цветовую тему в интегрированной среде разработки Visual Studio и как изменить цвета шрифта в редакторе.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

Настройка цветовой темы для интегрированной среды разработки

Цветовая тема по умолчанию для пользовательского интерфейса Visual Studio — Dark. Далее рассмотрим, как изменить ее на другую цветовую тему.

1. В строке меню выберите пункт Сервис>Параметры.
2. В списке параметров выберите «Общие среды>«.
3. В списке цветовой темы выберите между синей темой, синей (дополнительной контрастностью), темной темой по умолчанию и светлой темой . Также можно выбрать параметр Использовать настройки системы, чтобы выбрать тему, используемую в Windows.

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

Совет Требуется больше тем? Ознакомьтесь с широким набором настраиваемых тем в магазине Visual Studio Marketplace. Дополнительные сведения о примерах новых настраиваемых тем Visual Studio 2022 на основе VS Code см. в записи блога Новая коллекция тем Visual Studio.

В этой статье показано, как настроить цветовую тему Visual Studio из синей темы на темную тему. Затем показано, как настроить цвета для двух разных типов текста в редакторе кода.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

Настройка цветовой темы для интегрированной среды разработки

По умолчанию в пользовательском интерфейсе Visual Studio установлена синяя тема. Вот как изменить его на Dark.

1. В строке меню, где расположены разделы Файл и Изменить, выберите Средства>Параметры.
2. Откройте страницу параметров Окружение >Общие, измените значение Цветовая тема на Темная и щелкните ОК. Цветовая тема для всей среды разработки (IDE) Visual Studio изменяется на Темная.

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

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

Вот как настроить некоторые цвета текста для редактора.

Сначала создайте XML-файл, чтобы просмотреть цвета по умолчанию:

 Garghentini, Davide  Computer 44.95 2000-10-01 An in-depth look at creating applications with XML.  Garcia, Debra  Fantasy 5.95 2000-12-16 A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.   

Обратите внимание, что цвет номеров строк бирюзовый, а атрибутов XML (например id=»bk101″ ) — голубой.

Затем измените цвет текста для следующих элементов:

1. Чтобы открыть диалоговое окно Параметры, в строке меню выберите Сервис>Параметры.
2. В разделе Среда выберите категорию Шрифты и цвета. Обратите внимание, что текст в разделе «Показать параметры» для текстового редактора. Вы можете развернуть раскрывающийся список, чтобы просмотреть обширный список мест, где можно настроить шрифты и цвет текста.
3. Чтобы изменить цвет номера строки, в списке Отображение элементов выберите Номер строки. В поле Основной цвет элемента выберите Оливковый. Некоторые языки имеют собственные параметры шрифтов и цветов. Если вы разработчик C++ и хотите изменить цвет, используемый для функций, например, можно найти функции C++ в списке отображаемых элементов .
4. Перед выходом из диалогового окна можно также изменить цвет XML-атрибутов. В списке Отображение элементов прокрутите вниз до элемента Атрибут XML и выберите его. В поле Основной цвет элемента выберите Травяной. Нажмите кнопку «ОК «, чтобы сохранить выбранные элементы и закрыть диалоговое окно. Теперь цвет номеров строк станет оливковым, а цвет XML-атрибутов — ярко-травяным. Если открыть другой тип файла, например файл кода C++ или C#, номера строк также отображаются в оливковом цвете.

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

Ознакомьтесь с другими параметрами настройки в диалоговом окне « Параметры шрифтов>и цветов», чтобы сделать Visual Studio собственным.

Ищете сведения о том, как скачать цветовую тему VS Code , а затем импортировать их в 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 такого содержания:

< "name": "My theme", "version": "1.0.0", "engines": < "vscode": ">=0.9.0-pre.1" >, "publisher": "MAX", "contributes": < "themes": [ < "label": "MyTheme", "uiTheme": "vs", "path": "./themes/my.tmTheme" >] > >

Название, версию можно поменять на свою. Параметр 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 у меня такая:

. "workbench.colorCustomizations": < "foreground": "#000000", "editor.lineHighlightBackground": "#F0F05D70" >, .

Параметр foreground задаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color. После сохранения settings.json изменения сразу же вступают в силу.

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

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

Подсветка кода в VSCode

Теперь самое интересное. Для изменения подсветки кода, используется секция editor.tokenColorCustomizations . В ней указывается тема оформления, для которой нужно внести изменения. То есть настройки применятся только, если будет выбрана эта тема. Покажу на примере:

. "editor.tokenColorCustomizations": < "[Visual Studio Light]": < "textMateRules": [ < "scope": "entity.name.function.php", "settings": < "foreground": "#000000", "fontStyle": "italic underline" >>, < "scope": "variable.other.php", "settings": < "foreground": "#0000BB", >>, ], >, >, .

Здесь выбрана тема «Visual Studio Light». Секция textMateRules как раз и содержит оформление для каждого элемента, который задаётся в параметре scope . Само же оформление задается в параметре settings . Если оформление для разных элементов одно и тоже, то в scope можно их перечислить через запятую, например так (здесь два элемента):

Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию. Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter . После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента. Здесь указывается текущее оформление. Строчка:

entity.name.function.php
показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:

entity.name.function.php meta.function-call.php source.php meta.embedded.block.php text.html.php

Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php. Если нужно изменить элемент, достаточно скопировать его из этой информации и вставить в settings.json . После сохранения файла, изменения будут сразу же видны в коде.

Подсказка. Удобно разделить окна редактора VSCode, чтобы в одном был исходный php-код, а в другом settings.json .