Як змінити тему в VS Code

Visual Studio Code перетворює редагування та написання нового коду в безпроблемний і веселий досвід. Темна тема VS Code за замовчуванням була розроблена так, щоб було легше для очей, ніж звичайний різкий білий фон, який може викликати втому після довгих годин роботи. Але що робити, якщо вам не дуже подобаються темні кольори на екрані під час роботи?

Як змінити тему в VS Code

Перевага модульного дизайну VS Code полягає в тому, що ви маєте величезну свободу у зміні оригінальної темної теми за допомогою безлічі різних параметрів налаштування, які охоплюють гаму кольорів екрана, шрифтів і навіть вигляду самого інтегрованого терміналу VS Code.

Ця стаття розповість вам все, що вам потрібно знати про зміну тем у VS Code.

Як змінити тему в VS Code

Змінити загальну тему в VS Code швидко та легко. Ось що вам потрібно зробити:

  1. Відкрийте VS Code.

  2. Виберіть «Файл» («Код» у macOS), виберіть «Налаштування», потім виберіть «Кольорова тема».

  3. VS Code покаже вам добірку попередньо створених тем для вибору у спадному меню.

  4. Використовуйте клавіші керування курсором, щоб переглянути, як кожна тема виглядає безпосередньо на екрані.

  5. Натисніть «Enter» під час вибору, щоб вибрати ту тему для використання.

Зміна теми на іншу попередньо налаштовану може бути першим, що ви зробите, коли відкриваєте VS Code вперше. Кодування може зайняти багато часу, тому корисно використовувати тему, яка вам подобається і яка не шкодить вашим очам під час роботи.

Як змінити тему термінала в VS Code

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

Перш ніж використовувати вищезгадані дії для зміни теми, відкрийте консоль терміналу (Ctrl + Shift + P), щоб переглянути зміни, внесені в термінал. Деякі теми не вносять жодних змін у термінал, тоді як інші можуть різко змінити його. Крім того, використовувати тему, яка вам подобається лише помірно, теж не варто, оскільки ви можете використовувати термінал більше, ніж думали спочатку.

Однак є кілька обхідних шляхів, які дозволять вам змінити тему терміналу, які ми розглянемо в розділах нижче.

Як змінити тему матеріалу в VS Code

Головною особливістю VS Code є надлишок захоплюючих розширень, щоб налаштувати ваш досвід кодування та додати більше функціональних можливостей до текстового редактора. Одним з таких розширень є Material Theme, одне з найпопулярніших у своєму роді на VS Code Marketplace.

Material Theme має багато переваг у порівнянні з попередньо налаштованими дизайнами, але деяким користувачам цього не вистачає. Посібник користувача для цього розширення містить кілька порад щодо того, як внести подальші зміни відповідно до ваших потреб. Ось як змінити загальну тему в Material Theme:

  1. Відкрийте швидке меню (Ctrl + Shift + P).

  2. Введіть «тема» у підказці.

  3. Виберіть «Налаштування: колірна тема».

  4. Виберіть один із попередніх налаштувань Теми матеріалу.

Встановлення кольору акценту змусить частину коду з’явитися, що може бути корисно, якщо це особливо важливий або клопітний рядок для діагностики. Щоб встановити колір акценту, виконайте такі дії:

  1. Відкрийте швидке меню (Ctrl + Shift + P).

  2. Введіть у підказці «тема матеріалу».

  3. Виберіть «Матеріальна тема: встановити колір акценту».

  4. Виберіть зі списку колір, який вам подобається.

Зі зміненою темою Material Theme ви можете отримати налаштування, які вищі за норму, і ми покажемо вам, як це зробити.

Як вручну налаштувати тему в VS Code

VS Code дозволяє набагато більше налаштувати, ніж просто перемикатися між кількома пресетами. Ось два способи налаштувати тему відповідно до ваших уподобань.

Спосіб 1 – Завантажте спеціальну тему

Говорячи про налаштування, ми не можемо обійтися без згадки про великий VS Code Marketplace. Існують різні розширення, які лише змінюють зовнішній вигляд VS Code, не заважаючи його функціональності. Ось як завантажити тему.

  1. Відкрийте VS Code Marketplace. Ви також можете скористатися інтегрованим меню «Розширення» зліва на екрані.

  2. Введіть «тема» в рядку пошуку, щоб переглянути лише ті елементи, які змінюють тему. Однією з наших головних рекомендацій є тема Material Theme, згадана вище, але ми впевнені, що ви зможете знайти ту, яка вам найкраще підходить.

  3. Завантажте розширення (якщо користуєтеся браузером), а потім встановіть файл .VSIX, перейшовши до «Розширення > значок із крапками > Установити з VSIX». Крім того, коли ви знайдете тему, яка вам подобається, у VS Code, натисніть на неї, а потім виберіть кнопку «Встановити» в меню деталей (праворуч).

  4. Після встановлення та ввімкнення теми виберіть її за допомогою команди «Налаштування: колірна тема».

Спосіб 2 – Редагування теми

Усі теми та налаштування зберігаються у VS Code за допомогою відкритого тексту. Виконайте кроки, щоб отримати доступ до цих налаштувань і внести потрібні зміни:

  1. Створіть робочий стіл або файл налаштувань користувача. Перший лише змінить зовнішній вигляд поточного проекту, але другий залишиться в нових проектах.
  2. Введіть команду «Налаштування: Відкрити налаштування» в головному меню.

  3. Виберіть вкладку у верхньому лівому куті, щоб вибрати між налаштуваннями користувача та робочого середовища.

  4. Натисніть «Редагувати в settings.json», щоб відкрити файл, який містить налаштування, які потрібно змінити.

  5. Знайдіть параметр під назвою «workbench.colorCustomizations».

  6. Зосередьтеся на зміні теми, яку ви хочете, додавши

«[Назва_теми]»: { }

Theme_name — це назва теми, яку потрібно змінити. Зберігайте цитати.

  1. Подальші зміни до теми вносяться в нових дужках. Введіть ім’я параметра, який потрібно змінити (в лапках), введіть ‘:’ і виберіть потрібний параметр.
  2. Використовуйте цей посібник, щоб знайти параметри, які потрібно змінити.
  3. Кольори зберігаються в шістнадцятковому коді. Використовуйте шістнадцятковий довідник кольорів, щоб точно визначити колір, який ви хочете.

  4. Коли ви закінчите зі змінами, збережіть файл.

Цей метод можна використовувати для зміни більшості інтерфейсу користувача та зовнішнього вигляду коду, включаючи колір основної теми, фони, зовнішній вигляд терміналу, кольори кнопок та стилі шрифтів.

Якщо вам цікаво, як змінити шрифт у коді VS, скористайтеся методом 2, описаним вище. Можливо, вам знадобиться посібник із шрифтів.

Додаткові поширені запитання

Де зберігаються теми VS Code?

Теми, які надходять із розширень, зберігаються в папці розширень VS Code. Це розташування знаходиться у вашому каталозі встановлення (наприклад, C:) і зазвичай його можна знайти тут:

~/.vscode/extensions

Тут «~» є каталогом встановлення VS Code.

Базові теми зберігаються в: Microsoft VS Code\resources\app\extensions\theme-defaults\themes

Однак вам не потрібно витрачати час на пошук файлів для зміни. Зміна налаштувань користувача за допомогою файлу «settings.json» дасть набагато швидші результати.

Як змінити колір коментаря в VS Code?

Щоб змінити кольори коментарів, відкрийте файл «settings.json» (використовуйте «Метод 2», описаний вище), виберіть тему, яку потрібно змінити, а потім введіть (у лапках):

“comments” : “#hexcode”

Тут «шістнадцятковий код» є кодом потрібного кольору. Використовуйте засіб вибору кольору, щоб вибрати відповідний колір.

Яка найкраща тема в VS Code?

Найкраща тема VS Code – це та, яка вам найбільше подобається та корисна для програмування. Різні користувачі можуть мати різні переваги кольору та теми. На щастя, є багато варіантів на вибір, будь то попередньо налаштовані теми, завантаження розширень або можливість налаштувати тему саме на свій смак.

Виберіть свою тему

За допомогою цих інструкцій ви можете повністю налаштувати тему за своїм бажанням. Завдяки багатству опцій VS Code залишається одним із найпопулярніших текстових редакторів, а його здатність отримувати нові функції за допомогою розширень робить його дуже схожим на IDE.

Які теми ви використовуєте в VS Code? Ви внесли якісь зміни до улюбленої теми? Дайте нам знати в розділі коментарів нижче.


$config[zx-auto] not found$config[zx-overlay] not found