Цветовая схема кода Visual Studio

Обновлено: 21.11.2024

Visual Studio Code — это легкий, но мощный бесплатный редактор исходного кода от Microsoft. Он очень популярен среди веб-разработчиков, разработчиков мобильных устройств и оборудования и является одним из лучших продуктов, созданных Microsoft.

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

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

Примечание. Чтобы установить новую тему в VS Code, вы можете посетить магазин и выбрать тему, которую хотите загрузить. Теперь вы можете открыть палитру цветовых тем из меню Файл > Настройки > Цветовая тема или использовать сочетание клавиш Ctrl+K Ctrl+T , чтобы отобразить палитру. Просмотрите варианты, чтобы предварительно просмотреть цвета темы и выбрать тему, которую хотите использовать.

Здесь, в этом списке, мы поговорим о лучших темах vscode, которые включают светлые темы vscode, темные темы vscode, темы vscode material и другие популярные темы VS Code.

15 лучших тем для VSCode

Давайте рассмотрим эти популярные темы vscode одну за другой.

Один темный профессионал:

One Dark Pro — одна из самых загружаемых и используемых тем для VS Code. Разработчики, предпочитающие темный режим, любят эту тему из-за хорошо сочетающихся цветовых схем и визуально приятных стилей.

Официальный представитель Дракулы:

Опять же, Dracula Official — это темная тема для Visual Studio Code и более 181 приложения. Эта удобная для дизайнеров темная тема создана Zeno Rocha. Дракула доступна везде, и это одна из самых популярных тем из когда-либо созданных.

Зима близко:

Вы все знакомы с этим популярным диалогом, не так ли?

Это расширение, тема «Зима приближается», добавляет темный, светлый и темный текст без курсива. Эта тема вдохновлена темой Visual Studio Dark+, Monokai и Дастина Сандера для «Старой надежды». Синий фон этой темы вдохновлен темой Night Owl Сары Драснер. Его создал Джон Папа.

Оттенки фиолетового:

Shades of Purple — одна из самых загружаемых тем VS Code с самым высоким рейтингом на рынке. Его смелые оттенки фиолетового, редактирование уценки и превосходный стиль улучшают опыт разработчика и его способность сканировать код. Эта тема представляет собой прекрасное сочетание оттенков фиолетового с отличным выделением цветов, что позволяет разработчикам быстро определять различные атрибуты.

Ночная сова:

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

МоноКай Про:

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

Ayu – популярная тема VSCode, представленная в трех версиях: темная, светлая и призрачная. Эта простая, яркая и элегантная тема ценится разработчиками, которые много часов пишут код. Это одна из самых популярных и загружаемых тем для Visual Studio Code.

Бледная ночь:

Эта сочная тема, вдохновленная материалами, использует минимальный контраст в первых трех вариантах. Это элегантная, чистая и красивая тема, созданная Олаолу Олавуйи.

SynthWave '84:

Вдохновение для дизайна может прийти откуда угодно!

На эту экспериментальную тему повлияла музыка и обложки современных брендов Synthwave, таких как FM-84, Timecop 1983 и The Midnight. Эта простая тема CSS — это небольшой праздник эстетики 80-х годов в современной веб-разработке. Он воплощает неоновые мечты 80-х благодаря эффекту свечения и хорошо сочетающимся цветам в палитре, что делает его одной из стильных и элегантных тем с несколькими установками.

Ноктис:

Noctis от Liviu Schera – это коллекция светлых и темных тем с хорошо сбалансированным и визуально привлекательным сочетанием теплых и холодных цветов.

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

Атом 1 (темный и светлый):

Эта популярная тема VSCode также доступна в облегченной версии. Он основан на теме One Dark от Atom. Обе версии — Atom One Dark Theme и Atom One Light Theme — самые популярные темы на рынке. Эта тема создана Махмудом Али и полностью соответствует тематике Workbench.

Тема GitHub:

Одна тема монокай:

One Monokai — это сочетание тем Monokai и One Dark. Он разработан с использованием хорошо подобранного сочетания цветов и лучших функций редактирования кода, которые улучшают работу разработчиков.

Это одна из самых популярных и наиболее часто используемых темных тем vscode, созданная Джошуа Аземо. Это понятная, удобная и увлекательная тема для Visual Studio Code.

Nord – это арктическая, северно-голубоватая, чистая и элегантная тема, разработанная Arctic Ice Studio.

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

Официальная тема Cobalt2:

Эта тема vscode создана Весом Босом. Это приятно для глаз, красиво оформлено и является одной из самых популярных тем на рынке. Специально подобранные цвета и стили помогают разработчикам сосредоточиться на коде и его ясности.

Почему следует выбирать Visual Studio Code в качестве редактора кода?

Во-первых, это очень быстро.

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

Очевидно, что чем больше кода, тем больше отладки и сложности. В Visual Studio Code есть интерактивный отладчик, который помогает просматривать стеки вызовов, проверять переменные и выполнять команды в консоли.

Встроенная поддержка Git и других инструментов для создания скриптов делает разработку в VS Code быстрее, чем когда-либо. Он подходит для современной веб-разработки благодаря богатой инструментальной поддержке таких технологий, как JSX/React, HTML, CSS, JavaScript, TypeScript, Less и JSON.

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

Мы попытались охватить основные темы для VS Code. Если вы используете тему, которой нет в этом списке, вы можете поделиться ею в комментариях ниже! Кроме того, мы хотели бы услышать о вашем опыте разработки. Расскажите нам о своем любимом редакторе и используемой вами теме, которые помогут вам продуктивно работать.

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

Согласно опросу разработчиков 2019 года, Visual Studio Code (VSCode) занял первое место: его использовали 50 % из 87 317 респондентов. Это был большой шаг вперед после того, как он занял 13-е место среди популярных инструментов разработки в Stackoverflow.

VSCode представляет собой молниеносный редактор исходного кода, идеально подходящий для повседневного использования. Благодаря поддержке сотен различных языков программирования, включая C++, Java, JSON, Julia и другие, он повышает вашу производительность за счет сопоставления скобок, выбора блоков, подсветки синтаксиса, автоматического отступа и многого другого.

Однако выбор из более чем 5000 тем может оказаться непростой задачей. Если вы ищете лучшие темы VSCode, которые можно опробовать в 2022 году, вот множество стильных тем на выбор — от ярких и стильных до эффектных.

Как установить темы в Visual Studio Code

Вы можете установить темы в Visual Studio Code двумя основными способами. Вы можете посетить рынок и выбрать тему, которую хотите загрузить, или выполнить поиск в VSCode IDE.

Способ 1. Торговая площадка

1. Посетите магазин и выберите тему, которую хотите загрузить. В VSCode нажмите «Файл»> «Настройки»> «Цветовая тема», чтобы открыть средство выбора «Цветовая тема» на ПК с Windows. Если вы используете macOS, нажмите «Код»> «Настройки»> «Цветовая тема»

Вы также можете открыть средство выбора с помощью сочетания клавиш «Ctrl+K Ctrl+T».

2: используйте клавиши курсора для прокрутки и предварительного просмотра цветов темы

3. Выберите нужную тему и нажмите «Ввод» на клавиатуре.

Способ 2. Поиск в VSCode IDE

Кроме того, вы можете установить тему, выполнив поиск в VSCode IDE. На значке «Расширения» в левой части VSCode найдите нужную тему и нажмите «Установить».

Лучшие темные темы для VSCode

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

Один темный профессионал

One Dark Pro — самая популярная и широко загружаемая тема VSCode, которую установили почти 4 миллиона раз. Он основан на стандартной теме Atom One Dark и лучше всего подходит для разработчиков, которые любят темные темы. Он имеет хорошо сочетающиеся цветовые схемы и крутые цвета подсветки синтаксиса, которые делают его визуально привлекательным.

Официальный Дракула

Темная тема Dracula Official, созданная Зено Роча, предназначена для VSCode и более 181 приложения. Его загрузили более 2 миллионов раз по всему миру, и он получил среднюю оценку 4,9 от 81 рецензента. Удобная для дизайнеров темная тема с отличными цветовыми сочетаниями и контрастами для повышения вашей продуктивности.

Даркула

Если вы пользовались интегрированными средами разработки Jetbrains и Android Studio, вы сталкивались с темой Darcula. Хотя Dracula Official легко спутать с Darcula, последний предлагает кропотливо темную цветовую схему для более чем 195 приложений, редакторов кода и эмуляторов терминалов, включая VSCode. Даркула — отличный вариант для унифицированного взаимодействия с предложениями IDE Jetbrains.

Синтвейв 84

Тема Synthwave ’84 – это простая тема CSS, которая прославляет эстетику 80-х годов в современной веб-разработке. На него повлияла музыка и обложки современных брендов Synthwave, таких как Timecop 1893, The Midnight и FM-84. Он позволяет вам испытать эффект свечения неоновых снов 80-х годов с хорошо смешанными цветами, что делает его одной из самых элегантных и стильных тем.

Темная тема Atom One

Созданная Махмудом Али, она послужила источником вдохновения для темы One Dark и основана на теме из Atom IDE. В отличие от других темных тем, имеет только один вариант — темный. Отличный вариант, если вы соскучились по Атому, но не хотите к нему возвращаться. Его установили почти 2 миллиона раз по всему миру с рейтингом 5/5.

Ночная сова

Вы «сова» и любите программировать ночью, когда весь остальной мир спит? Тема «Ночная сова» будет мотивировать вас на всю ночь. Он имеет светлую и темную тему с учетом людей с дальтонизмом и для удобного просмотра при дневном свете.

Лучшие светлые темы для VSCode

Светлые темы рекомендуются для кодирования дневного света. Поскольку программисты тратят большую часть своего дневного времени на кодирование, им нужна элегантная светлая тема, которая облегчит кодирование. Вот лучшие светлые темы для VSCode:

Тихий свет

Quiet Light, впервые созданный для текстового редактора Espresso на Mac, является официальным портом темы Quiet Light. Хотя VSCode поставляется с темой Quiet Light по умолчанию, в ней есть больше модификаций, чтобы удовлетворить ваши вкусы и предпочтения. Он поддерживает несколько языков, включая JavaScript, PHP, HTML, CSS, Python и другие.

Подсветка кронштейна Pro

Тема Bracket Lights Pro привлекает внимание своей красивой цветовой палитрой. Он направляет светлую тему редактора кода Adobe Brackets на VSCode. Хотя Adobe прекратила поддержку Brackets 1 сентября 2021 года, вам понравится использовать Bracket Lights Pro за его чистый внешний вид.

Синий свет

Если вам нравится тема с изысканностью и широким спектром цветов в палитре, вы никогда не ошибетесь с Bluloco Light. Первоначально созданный на основе One Light Theme, он отличается более широким использованием согласованности цветов и областей синтаксиса в отношении удобочитаемости, контрастности и эстетики.

Лучшие пакеты тем для VSCode

VSCode, возможно, является одним из лучших редакторов кода с огромным набором расширений, поддерживаемых сообществом.Доступный для macOS, Windows и Linux, вы можете удовлетворить практически все свои потребности в программировании независимо от операционной системы. Вот лучшие пакеты тем для VSCode:

Ночь Токио

Tokyo Night — это чистая, классная и успокаивающая темная тема со спокойными цветами. Он воспевает огни ночного центра Токио и доступен как в светлой, так и в темной версиях. Его идеальное сочетание и сочетание цветов помогут вам медитировать во время написания кода.

Тема GitHub

Зима близко

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

Тема Firefox

Тема Firefox основана на инструментах разработчика Mozilla Firefox. Идеальный баланс холодных цветов придает ему элегантный вид с неоновой подсветкой значков. Для легкого переключения между вкладками он выделяет подчеркнутые открытые вкладки, чтобы обеспечить быстрый переход. Он доступен в темной и светлой версиях.

Тема Sublime Material

Тема Sublime Material, разработанная Маттией Асторино, — отличный способ привести стиль темы в соответствие со стандартным VSCode, который нельзя изменить. Это популярная и популярная IDE, которая завоевала огромную любовь многих разработчиков. Он доступен в темной и светлой версиях, чтобы помочь вам перейти от написания кода днем к ночи.

Ню Диско

Nu Disco был создан Дэнни Бэнксом и поддерживается Style Dictionary. Его синтаксические цвета красиво размещены с контрастными цветами, чтобы упростить процесс кодирования. Доступный в темной и светлой версиях, он идеально подходит для использования в условиях яркого и слабого освещения.

Подведение итогов

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

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

Если вы ищете новую тему, чтобы изменить свой редактор кода в новом году, я здесь, чтобы помочь! Ознакомьтесь с разнообразными стильными темами с уникальными цветовыми палитрами — от гладких до эффектных, ярких и любых промежуточных — чтобы понять, что лучше всего подходит для вас. Я даже включил несколько интересных пакетов значков, чтобы еще больше настроить VS Code.

Я разбил эти темы VS Code на следующие разделы:

В тренде (1–20)
Темный (21–30)
Легкий (31–40)
Красочный (41–50)
Бонус: значки (51–56)

Чтобы установить тему в VS Code, просто зайдите на рынок и выберите тему, которую хотите загрузить.Чтобы переключаться между установленными темами, откройте палитру команд с помощью CMD/CTRL + SHIFT + P и введите Preferences: Color Theme. Затем вы можете просматривать свои темы в меню.

В тренде

Откройте для себя новые трендовые темы для VS Code, популярность которых растет.

1. Радикальный

2. Материал Gruvbox

3. Мерко

4. Ночь Токио

5. Устранение

6. Минимум

7. Аврора Х

8. Атлантическая ночь

9. Стеклянный интерфейс

10. Немного сирени

11. FireFly Pro

12. РеИП

13. Слизь

14. Подпись Dark Pro

15. Ариакэ Дарк

16. Шикарный свет

17. Космический серый

18. Небесный

19. Черника темная

20. Медведь

Вы предпочитаете работать в темноте? Откройте для себя одни из лучших темных тем для VS Code.

Вы также можете установить все эти темные темы, установив наш пакет Best Dark Themes Pack.

21. Один темный профессионал

22. Официальный Дракула

23. Север

24. Бледная ночь

25. Один монокай

26. Ночная сова

27. Андромеда

28. Даркула

29. Тема Горизонта

30. Кобальт2

Свет

Хотите что-нибудь полегче для своего редактора кода? Оцените эти стильные светлые темы.

Вы также можете установить все эти светлые темы, установив наш пакет лучших светлых тем.

31. Атом Один Свет

32. Блулоко Лайт

33. Кронштейны Лайт Про

34. Исгрифеннвр

35. Облегченная версия NetBeans

36. Тихий свет

37. Легкий прыжок

38. Ремикс NotepadPlusPlus

39. GitHub Light

40. Гитхаб плюс

Красочный

Устали от однотонных тем и скучных цветовых палитр? Добавьте красок в свой редактор с помощью этих красочных тем.

Вы также можете установить все эти красочные темы, установив наш пакет лучших красочных тем.

41. Оттенки фиолетового

42. Синтезвейв

43.Синий код

44. Киберпанк

45. Лазерная волна

46. Зеоника

47. Хипстер

48. Уайлдберри

49. Киита

50. Мягкая эра

Бонус: значки

VS Code также позволяет настраивать значки в редакторе. На боковой панели VS Code появятся новые значки, которые помогут вам визуализировать различные файлы и папки. Вы можете установить пакеты значков, как и другие темы.

Чтобы изменить значки в редакторе, откройте палитру команд с помощью CMD/CTRL + SHIFT + P и введите команду «Настройки: Тема значка файла» . Затем вы можете просмотреть установленные темы значков из меню и просмотреть их в режиме реального времени.

51. Перо

52. Гелий

53. Рассада

54. Огни большого города

55. Крайне нейтральный

56. Чаша

Что дальше?

Ищете еще больше тем? Попробуйте поискать на торговой площадке VS Code и отсортировать по темам. Разработчики создали более 2500 тем, которые вы можете выбрать для настройки VS Code.

Хотите создать свою собственную тему VS Code? Узнайте, как создать расширение, настроить цветовую палитру VS Code и разместить свой проект на торговой площадке VS Code, из нашего руководства: Запустите продукт на торговой площадке VS Code за 30 минут или меньше.

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

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

Если вы еще не установили Visual Studio, перейдите на страницу загрузок Visual Studio, чтобы установить ее бесплатно.

Установите цветовую тему для IDE

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

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

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

В списке цветовых тем выберите темную тему по умолчанию, синюю тему, синюю тему (дополнительный контраст) или светлую тему. Или выберите параметр «Использовать системные настройки», чтобы выбрать тему, используемую Windows.

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

Хотите еще больше тем на выбор? Ознакомьтесь с широким выбором пользовательских тем в Visual Studio Marketplace. А чтобы увидеть примеры новых пользовательских тем Visual Studio 2022 на основе VS Code, ознакомьтесь с записью блога Представляем коллекцию новых тем Visual Studio.

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

Если вы еще не установили Visual Studio, перейдите на страницу загрузок Visual Studio, чтобы установить ее бесплатно.

Установите цветовую тему для IDE

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

В строке меню, представляющей собой строку меню, например "Файл" и "Правка", выберите "Инструменты" > "Параметры".

На странице параметров "Окружающая среда" > "Общие" измените выбор цветовой темы на "Темная", а затем нажмите "ОК".

Цветовая тема для всей среды разработки Visual Studio (IDE) меняется на темную.

Вы можете создавать свои собственные темы, установив Visual Studio Color Theme Designer из Visual Studio Marketplace.

Если вы еще не установили Visual Studio, перейдите на страницу загрузок Visual Studio, чтобы установить ее бесплатно.

Установите цветовую тему для IDE

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

Цветовая тема для всей среды разработки Visual Studio (IDE) меняется на темную.

Вы можете установить дополнительные предопределенные темы, установив Редактор цветовых тем Visual Studio из Visual Studio Marketplace. После установки этого инструмента в раскрывающемся списке Цветовая тема появятся дополнительные цветовые темы.

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

Теперь мы настроим некоторые цвета текста для редактора. Во-первых, давайте создадим новый файл XML, чтобы увидеть цвета по умолчанию.

В строке меню выберите «Файл» > «Создать» > «Файл».

В диалоговом окне "Новый файл" в категории "Общие" выберите "Файл XML", а затем выберите "Открыть".

Вставьте следующий XML-код под строкой, содержащей .

Обратите внимание, что номера строк окрашены в бирюзово-синий цвет, а атрибуты XML (такие как id="bk101" ) – светло-голубые. Мы собираемся изменить цвет текста для этих элементов.

Чтобы открыть диалоговое окно "Параметры", выберите "Инструменты" > "Параметры" в строке меню.

В разделе "Среда" выберите категорию "Шрифты и цвета".

Обратите внимание, что текст в разделе «Показать настройки для» говорит «Текстовый редактор — это то, что нам нужно». Разверните раскрывающийся список, чтобы увидеть обширный список мест, где можно настроить шрифты и цвет текста.

Чтобы изменить цвет текста номеров строк, в списке Отображаемые элементы выберите Номер строки. В поле "Элемент переднего плана" выберите "Оливковый".

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

Прежде чем выйти из диалогового окна, давайте также изменим цвет атрибутов XML. В списке отображаемых элементов прокрутите вниз до XML-атрибута и выберите его. В поле Предмет на переднем плане выберите Lime. Нажмите OK, чтобы сохранить наш выбор и закрыть диалоговое окно.

Мы рассмотрели всего несколько способов настройки цветов в Visual Studio. Мы надеемся, что вы изучите другие параметры настройки в диалоговом окне «Параметры», чтобы по-настоящему настроить Visual Studio под себя.

Читайте также: