Как настроить цвет visual studio

Как изменить тему в Visual Studio

Интегрированная среда разработки Microsoft — лучший выбор для многих современных профессионалов. Она используется для написания программ, веб-сайтов, приложений и т. Д.

Visual Studio — чрезвычайно полезный инструмент, предлагающий ряд замечательных функций, а также возможность персонализировать и настроить ваши предпочтения. Вы можете изменить различные аспекты среды, такие как тема, цвета или шрифты.

Если вы новичок в использовании этого инструмента и хотите знать, как внести эти изменения, эта статья поможет вам разобраться во всем.

Как установить тему

Когда вы впервые начинаете использовать Visual Studio, ваша тема по умолчанию настроена на синий цвет. Если вы не находите это подходящим, вы можете изменить его на Темный или Светлый. Вот как:

1. Перейти к строке меню. Он находится в верхней части экрана и содержит различные вкладки, такие как «Файл», «Редактировать», «Просмотр» и т. Д.
2. Найдите Инструменты и выберите вкладку.
3. Выберите Options из выпадающего меню. Обратите внимание, что в этом разделе вы можете настроить Visual Studio по своему вкусу с большим количеством возможностей, чем просто смена темы.
4. Выберите Environment, а затем General, чтобы открыть страницу параметров.
5. Найдите опцию «Цветовая тема» и установите ее на «Темный» или «Светлый»
6. Нажмите кнопку ОК, чтобы подтвердить свой выбор.
7. Полный сервис теперь появится в темном / светлом режиме.

Если вас интересуют другие темы, вы можете найти их на торговой площадке Visual Studio. Выберите редактор цветовых тем Visual Studio и загрузите его, чтобы получить доступ к дополнительным темам в меню «Цветовая тема». Эта функция также позволяет создавать свои собственные темы.

Если в какой-то момент вы захотите вернуться к теме по умолчанию для службы, вы можете легко сделать это, повторив ранее описанные шаги и установить для темы синий цвет.

Как изменить шрифты и цвета

Если вы хотите изменить шрифты и цвета текста, который появляется в этом инструменте, выполните следующие действия:

1. Выберите Инструменты в строке меню.
2. Нажмите на Опции.
3. Нажмите на раздел «Окружающая среда».
4. Выберите «Шрифты и цвета» и убедитесь, что на вкладке справа с надписью «Показать параметры для» установлено значение «Шрифт среды».
5. Вы увидите список различных шрифтов внизу, поэтому расширьте меню и выберите шрифт, который вам нравится.
6. Вы также можете изменить размер шрифта — выберите меню Размер и выберите размер. Нажав на кнопку ОК, вы сохраните свой выбор.

Как изменить цвет вашего текста в текстовом редакторе

Другая функция, которую вы можете изменить, — это цвет текста, который вы вводите в этой программе. Сделайте следующее:

1. Нажмите на Инструменты в строке меню.
2. Выберите «Параметры» в раскрывающемся списке.
3. Выберите «Среда», а затем «Шрифты и цвета».
4. В верхней части экрана вы увидите параметр Показать настройки для:. Выберите текстовый редактор.
   Обратите внимание, что этот раздел также позволяет изменить шрифт текста. Раскрывающееся меню с различными шрифтами находится прямо на вкладке «Текстовый редактор», поэтому нажмите на стрелку, чтобы расширить меню и выбрать шрифт, который вы хотите видеть в Visual Studio.
5. Вернуться к изменению цвета: выберите «Номер строки» в разделе «Отображение элементов» и перейдите на передний план элемента справа.
6. Нажмите на стрелку, чтобы расширить список и выбрать цвет.
   
7. Прежде чем подтвердить свой выбор и покинуть окно, помните, что на разных языках программирования могут быть определенные шрифты и цвета для определенных функций. Помните об этом при выборе нового цвета или шрифта для вашего текста.

Темная или светлая тема — какая из них лучше?

Были споры о том, являются ли темные темы сейчас просто модными или для ваших глаз (и батареи) действительно лучше переключаться на темные режимы, где это возможно.

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

Если это не так, лучше придерживайтесь облегченной версии, чтобы избежать потенциальных проблем со зрением.

Какую тему вы используете для вашей 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 под любые «капризы». 🙂

Источник

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

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

Значения для параметров Шрифт и Размер применяются глобально для всех текстовых элементов во всех редакторах Visual Studio.

Имена моноширинных шрифтов выделены полужирным шрифтом.

Параметры Основной цвет элемента, Фоновый цвет элемента и Полужирный можно задать для каждого типа текстового элемента. Например, если изменить цвета и выбрать значение Полужирный для параметров Комментарий и Закладки, другие типы текстовых элементов останутся неизменными.

Чтобы узнать, как настроить шрифты и цвета для интегрированной среды разработки, а не только для редактора кода, см. статью Практическое руководство. Изменение шрифтов и цветов в Visual Studio .

Изменение начертания, размера и цвета шрифта по умолчанию

В меню Сервис выберите пункт Параметры. В разделе Окружение выберите Шрифты и цвета.

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

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

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

Щелкните По умолчанию для сброса параметров до значений по умолчанию.

Нажмите кнопку ОК.

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

См. сведения об изменениях шрифта и цвета, которые можно внести в интегрированную среду разработки с помощью диалогового окна Параметры, в статье Страница «Шрифты и цвета», папка «Среда», диалоговое окно «Параметры».

Источник