Темы для vs code

03.09.202203.09.2022 admin 0 Comments

Темы для vs code

Всегда перед глазами: 15 лучших тем VS Code на 2022 год

Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за обширный набор функций, среди которых отладка, рефакторинг, подсветка синтаксиса, богатая экосистема расширений и разнообразные темы. Цель последних — повысить опыт и производительность разработчиков. Подборкой с лучшими из них поделились авторы блога ThemeSelection.

«Купи мне истребитель». Сбор средств для Воздушных Сил ВСУ

One Dark Pro

Количество установок: 4,4 млн.

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

Dracula official

Количество установок: 2,9 млн.

Еще одна темная тема, которую можно найти еще более чем в 180 приложениях. Подойдет для дизайнеров. Считается одной из самых популярных тем для VS Code.

GitHub Theme

Количество установок: 2,7 млн.

Классическая GitHub-тема, доступная в версиях light, dark, light default, dark default и dark dimmed. Популярна среди разработчиков, которым нравятся классические темы GitHub.

Winter is Coming Theme

Количество установок: 1,4 млн.

Вдохновлена такими темами, как Visual Studio Dark+, Monokai и Old Hope. В сборке темная, темная без курсива и светлая тема. Синий фон этой темы вдохновлен темой Night Owl.

Night Owl

Количество установок: 1,1 млн.

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

Monokai Pro

Количество установок: 1,1 млн.

В сборке — цветовая схема, настраиваемая UI-тема и иконки для Visual Studio Code. Главная цель Monokai Pro — позволить разработчику сосредоточиться на коде.

One Monokai

Количество установок: 1 млн.

Monokai + One Dark = One Monokai. В теме хорошо подобраны цвета, которые улучшают опыт разработчиков. Это одна из самых популярных и часто используемых темных тем VS Code.

Shades of Purple

Количество установок: 1 млн.

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

Количество установок: 991 тыс.

Тема выпускается в трех версиях — темной, светлой и mirage. Простая, яркая и элегантная тема подойдет разработчикам, которые подолгу пишут код.

The Best VS Code Themes 2022🤩

Looking for the best VS Code themes for your next project? Then here is the list that offers some of the most popular VS Code themes. Before we start the list, let’s get to know what VS Code is?

What Is VS Code?

Visual Studio Code is a lightweight yet powerful free-ware source-code editor made by Microsoft. It is very popular among web, mobile, and hardware developers, and is one of the best products created by Microsoft.

It offers support for debugging, intelligent code completion, syntax highlighting, code refactoring, a rich ecosystem of extensions, and hassle-free customization. It is widely used and developers love every feature of it including IntelliSense, built-in Git controls, quick navigation, fast editing, and various vs code themes that ultimately improve developer experience and productivity.

Here, in this list, we will talk about the Top vscode themes that include light vscode themes, dark vscode themes, vscode material themes, and other popular VS Code themes.

Features:

Visual Studio Code offers you some very unique features as follows:

Why Choose Visual Studio Code?

Microsoft’s Visual Studio Code is undoubtedly one of the best code editors out there. Offering a vast collection of community-supported extensions, you can use VS Code to boost your workflow and productivity. The app is available across Windows, macOS, and Linux, making it the perfect program to write code on, regardless of the operating system. One of the major key aspects of VS Code is its customizability and robust theming capabilities.

Following are some of the other factors that make Visual studio code awesome:

Now, let’s s start the collection of the best themes for visual studio.

The Best VS Code Themes:

There are a lot of themes for visual studio code that have a significant impact on clarity, maintenance, and speed of coding. Let’s explore the best vscode themes that are popular and trending.

One Dark Pro

Atom’s iconic One Dark theme for Visual Studio Code is highly suitable for developers who prefer dark mode. This theme is one of the most used themes because of its well-blended color schemes and visually pleasing styles.

Dracula Official

Another VS Code best dark theme in the list is Dracula Official for visual studio code and other 181+ apps. It is a designer-friendly dark theme created by Zeno Rocha. Besides, it is one of the most popular vs code themes ever created.

GitHub Theme

This classic GitHub theme is available in light, dark, light default, dark default, and dark dimmed versions. These themes are similar to official GitHub themes. It is popular among developers who prefer GitHub’s classic themes.

Winter Is Coming Theme

Pretty Familiar Dialogue…!!

Well, this Visual Studio Code theme comes in dark, dark with no italics, and light themes. Besides, this VScode theme is inspired by Visual Studio Dark+, Monokai, And Dustin Sander’s theme for “An Old Hope”. The blue background of this theme is inspired by Sarah Drasner’s Night Owl Theme.

Night Owl

Dedicated to Night Owls, this theme is suitable for those who love coding late at the night. The color choices, background, and styling are perfectly suitable for low-light circumstances. There’s also a Light Owl Theme that is created for easy viewing in daylight. You can disable italics if you wish as there is a no-italics theme available as well.

Monokai Pro

Monokai Pro is a color scheme, customized user interface theme, and complete icon set for Visual Studio Code. It has been designed by the author of the original Monokai colors. Carefully selected shades of colors are the foundation of an uncompromising, non-distractive user interface. The single goal of Monokai Pro is to let you focus on your code.

One Monokai

One Monokai is a combination of Monokai and One Dark theme. It is designed with a well-chosen blend of colors and the best code editing functionalities that improve the developer experience.

It is one of the top-rated and mostly used dark vscode themes created by Joshua Azeroth. It is a clear, convenient, and captivating theme for Visual Studio Code.

Shades of Purple

Shades of Purple is one of the most downloaded, top-rated VS Code themes in the marketplace. Its bold shades of purple, markdown editing, and excellent styling improve the developer’s experience and ability to scan code. This theme is a great mix of shades of purple with great feature color highlighting, making it easier for the developers to identify various attributes quickly.

Ayu is a popular VSCode theme and comes in three versions — dark, light, and mirage. This simple, bright, and elegant theme is appreciated by developers who code for long hours. It is one of the top-rated and most downloaded themes for Visual Studio Code.

Palenight

This juicy material-inspired theme uses minimal contrast across the first three variants. It is an elegant, clean, and beautiful theme created by Olaolu Olawuyi.

Cobalt2 Theme Official

This vscode theme is created by Wes Bos. It is easy on the eye, beautifully designed, and one of the top-rated themes in the market. Its handpicked colors and styles help developers focus on code and its clarity.

SynthWave ‘84

This experimental theme is influenced by the music and the cover artwork of modern Synthwave brands like FM-84, Timecop 1983, and The Midnight. This plain CSS theme is a little celebration of 80s aesthetics in modern web development. It enables the 80s neon dreams through glow effect and well-blended colors in the palette, making it one of the classy and elegant themes with a number of installs.

Noctis

Noctis by Liviu Schera is a collection of light and dark themes with a well-balanced and visually appealing blend of warm and cold colors.

It is designed to be easy on the eyes, hence, reducing eye strain and giving semantic meaning to colors used in this theme. There are 8 dark and 3 light versions. With various colors and the best syntax highlighting, this theme has gained good ratings and a number of installs.

Panda Theme

A Superminimal, dark Syntax Theme. This is the latest version of the Panda Syntax theme. It’s a dark syntax theme crafted especially for Visual Studio Code [New Version], with subtle colors that are meant to be easy on the eyes.

Nord is an arctic, north-bluish, clean and elegant theme designed by Arctic Ice Studio.

It is designed to provide developers with fluent and clear workflow, great readability, and syntax highlighting through the well-blended shades of colors. It offers clutter-free, visually appealing, and popular code editing features that are loved by developers.

Sublime Material Theme

This is simply a port to align the style of the theme with the default VSCode chrome that cannot be changed atm.

Conclusion:

So, here was the collection of the best VS Code Themes 2022.

VS Codes are extremely helpful as they help to boost up the workflow and improve productivity.

Here in this collection, we have tried covering top themes for VS Code. If you are using a theme that is not here in this list, you can share via comments below! Also, we would like to hear about your developer experience.

While working with any projects you may need some admin templates. We at Themeselction provide Selected high quality, modern design, professional, and easy-to-use Free Admin Dashboard Template, HTML Themes, and UI Kits to create your applications faster!

Let us know your favorite editor and theme you use that help make you productive.

Top VSCode Themes to Try in 2022

Aphinya Dechalert | 7 min read | November 22, 2021

Table of contents

Visuals are essential for productivity when writing, editing and debugging code. VSCode has gained popularity among developers, and it’s easy to see why.

According to the 2019 Developers Survey, Visual Studio Code (VSCode) scooped the first position, with 50% of the 87,317 respondents using it. This was a great stride after it was ranked number 13 among popular development tools on Stackoverflow.

VSCode features a lightning-fast source code editor, ideal for everyday use. With support for hundreds of different programming languages, including C++, Java, JSON, Julia, among others, it improves your productivity with bracket matching, box selection, syntax highlighting, auto-indentation, and more.

However, with more than 5,000 themes to choose from, it can be daunting to find the best one. If you are looking for the top VSCode themes to try out in 2022, here is a variety of stylish themes to choose from – from vibrant and sleek to pizzazz.

How to Install Themes in Visual Studio Code

You can install themes in Visual Studio Code in two main ways. You can either visit the marketplace and select the theme you want to download, or you can search in VSCode IDE.

Method 1: Marketplace

1: Visit the marketplace and select the theme you want to download. In VSCode, click File> Preferences> Color Theme to open the Color Theme picker on your Windows PC. If you are on macOS, click on Code> Preferences> Color Theme

You can also open the picker using the keyboard shortcut “Ctrl+K Ctrl+T.”

2: Use the cursor keys scroll and preview the colors of the theme

3: Select the theme you want and press “Enter” on your keyboard

Method 2: Search in VSCode IDE

Alternatively, you can install a theme by searching it in the VSCode IDE. From the Extensions icon on the left side of VSCode, search for the required theme and click on install.

Top Dark Themes for VSCode

If you don’t want to get sore eyes using a light-themed IDE the whole day, a dark theme is your best option. Although VSCode has a default Dark+ Theme, it might lack your personal taste. You may want a mix of ivory colors and hues while keeping a dark background. Here are the top dark themes for VSCode:

One Dark Pro

One Dark Pro is the most popular and widely downloaded VSCode theme with almost 4 million installs. It’s based on Atom’s default One Dark theme and is best suited for developers who love dark mode themes. It has well-blended color schemes and cool syntax highlight colors that make it visually appealing.

Dracula Official

Created by Zeno Rocha, Dracula Official is a dark theme for VSCode and other 181+ apps. It has worldwide downloads of over 2 million and has received a 4.9 average rating by 81 reviewers. It has a designer-friendly dark theme with great color combinations and contrasts to enhance your productivity.

Darcula

If you have used Jetbrains IDEs and Android Studio, you have come across the Darcula theme. While it’s easy to confuse Dracula Official with the Darcula, the latter offers a painstakingly dark color scheme for over 195+ apps, code editors, and terminal emulators, including VSCode. For a unified experience in Jetbrains’ IDE offerings, Darcula is an excellent option.

Synthwave ’84

The Synthwave ’84 theme is a simple CSS theme that celebrates 80s aesthetics in modern web development. It is influenced by the music and the cover artwork of modern Synthwave brands like Timecop 1893, The Midnight, and FM-84. It lets you experience the 80s neon dreams glow effect with well-blended colors, making it one of the elegant and classiest themes.

Atom One Dark Theme

Created by Mahmoud Ali, it served as an inspiration to One Dark theme and is based on the theme from the Atom IDE. Unlike other dark themes, it has only one variant – dark. It’s an excellent option if you miss the Atom but don’t want to return to it. It boasts almost 2 million installs worldwide with a 5/5 rating.

Night Owl

Are you a night owl who likes coding at night when the rest of the world is asleep? Night Owl theme will keep you motivated throughout the night. It features a light and dark theme, taking into consideration colorblind people and for easy viewing in daylight.

Top Light Themes for VSCode

Light themes are recommended for daylight coding. Since programmers spend most of their daytime coding, they need an elegant light theme to help them code with ease. Here are the top light themes for VSCode:

Quiet Light

Built first for the Espresso text editor on Mac, Quiet Light is an official port of the Quiet Light Theme. Although VSCode comes with a default Quiet Light theme, this one has more modifications to appeal to your tastes and preferences. It supports several languages, including JavaScript, PHP, HTML, CSS, Python, and more.

Bracket Lights Pro

The Bracket Lights Pro theme has an eye-catching theme for its beautiful color palette. It channels Adobe’s Brackets code editor’s light theme to VSCode. Although Adobe ended its support for Brackets on September 1St, 2021, you will love using the Bracket Lights Pro for its clean look.

Bluloco Light

If you love a theme with sophistication and a wide range of colors in the palette, you will never go wrong with the Bluloco Light. Forked initially from One Light Theme, it features a more extensive usage of color consistency and syntax scopes regarding readability, contrast, and aesthetics.

Top Theme Packages for VSCode

VSCode is arguably one of the best code editors, with a huge array of community-supported extensions. Available across macOS, Windows, and Linux, you can fuel almost all your programming needs regardless of the operating system. Here are the top theme packages for VSCode:

Tokyo Night

Tokyo Night Tokyo Night Storm Tokyo Day

Tokyo Night is a clean, cool, and soothing dark theme with calm colors. It celebrates the lights of Downtown Tokyo at night and is available in both light and dark versions. Its perfect blend and combination of colors help you meditate as you code.

GitHub Theme

GitHub Themes

GitHub theme brings the GitHub experience to VSCode. It is similar to the official GitHub.com themes and is popular with developers who prefer GitHub’s classic themes. Although offered as a preview, it’s available in the dark, dark default, dark dimmed, light, and light default versions.

Winter is Coming

Dark Blue HTML Dark Blue JavaScript Dark Blue TypeScript Light JavaScript

If you are a top fan of Game of Thrones, you have heard this phrase several times throughout the show. It was created by John papa and comes in different versions, including dark blue, dark black, and light. It encompasses a balance in its color schemes, making it perfect for coding during the day and at night.

Firefox Theme

The Firefox theme is based on Mozilla Firefox’s developer tools. Its perfect balance of cool colors gives it an elegant look with neon-lighted icons. For easy switching between tabs, it gives a highlighted underline on opened tabs to ensure the quick transition. It’s available in dark and light versions.

Sublime Material Theme

Dark Light

Developed by Mattia Astorino, the Sublime Material theme is a great way to align the theme’s style with the default VSCode that can’t be changed. It’s a popular trending IDE available and has gained tremendous love from many developers. It’s available in dark and light versions to help you transition from coding during the day to the night.

Nu Disco

Nu Disco was built by Danny Banks and is powered by Style Dictionary. Its syntax colors are placed beautifully with contrasting colors to make your coding experience easy. Available in dark and light versions, it’s perfectly designed to be easy for use in bright and low light environments.

Wrap Up

VSCode is a great code editor that supports hundreds of languages and advanced features, including syntax highlighting, auto-indentation and snippets. It is suitable for modern web development and has an interactive debugger to view call stacks and execute variables.

As we head to 2022, trying out either of the above Visual Studio Code themes is imperative to enhance your coding process. While the above themes make your IDE look color and help your eyes sting less, they will not make you a better programmer. You need to learn and practice more to gain knowledge and experience in coding.

Tabnine

Tabnine is an intelligent, AI-driven code completion tool that can cut your coding time, reduce mistakes, and make best practice suggestions.

Aphinya is a full-stack developer specializing in a range of technologies. In addition to contributing regularly on Tabnine as a tech writer, she also runs dottedsquirrel.com

Top 40+ VSCode Extensions for Developers in 2022.

How to Convert a Java Object into a JSON String.

Top 7 Golang IDEs for Go Developers.

Top 16 Themes for Sublime Text Editor.

How to navigate remote work as a dev team

Top 40+ VSCode Extensions for Developers in 2022

What is Material-UI and how to use it correctly?

Is Visual Studio Code Really The Best Code Editor?

Suppose you’re a software developer that hasn’t heard of Microsoft’s GitHub Copilot. In that case,…

Since the advent of computers, the list of programming languages has diversified and evolved. Still,…

Native apps are all the rage, but web apps are better for accessibility and for…

Best VSCode Themes: Top 15 Themes For Visual Studio Code

Modified: June 1, 2021

Visual Studio Code is a lightweight yet powerful free-ware source-code editor made by Microsoft. It is very popular among web, mobile, and hardware developers, and one of the best products created by Microsoft.

It offers support for debugging, intelligent code completion, syntax highlighting, code refactoring, a rich ecosystem of extensions, and hassle-free customization. It is widely used and developers love every feature of it including IntelliSense, built-in Git controls, quick navigation, fast editing, and various vs code themes that ultimately improve developer experience and productivity.

There are a lot of themes for visual studio code that have a significant impact on clarity, maintenance, and speed of coding. Let’s explore the best vscode themes that are popular and trending.

Note: To install a new theme in VS Code, you can visit the marketplace and select the theme you want to download. Now, you can open the Color Theme Picker from File > Preferences > Color Theme or use the keyboard shortcut Ctrl+K Ctrl+T to display the picker. Navigate through the options to preview the colors of the theme and select the theme you want to use.

Here, in this list, we will talk about the Top vscode themes that include light vscode themes, dark vscode themes, vscode material themes, and other popular VS Code themes.

15 Best Theme For VSCode

Let’s explore these popular vscode themes one by one.

One Dark Pro:

One Dark Pro is one of the most downloaded and used themes for VS Code. Developers who prefer dark mode are loving this theme because of its well-blended color schemes and visually pleasing styles.

Image Source: marketplace.visualstudio.com

Dracula Official:

Again, Dracula Official is a dark theme for visual studio code and other 181+ apps. This designer-friendly dark theme is created by Zeno Rocha. Dracula is available everywhere and it is one of the most popular themes ever created.

Image Source: marketplace.visualstudio.com

Winter Is Coming:

Y’all are familiar with this popular dialogue, isn’t it?

This extension, Winter Is Coming Theme adds dark, light, and dark with no italics. This theme is inspired by Visual Studio Dark+, Monokai, And Dustin Sander’s theme for “An Old Hope”. The blue background of this theme is inspired by Sarah Drasner’s Night Owl Theme. It is created by John Papa.

Image Source: marketplace.visualstudio.com

Shades Of Purple:

Shades of Purple is one of the most downloaded, top-rated VS Code themes in the marketplace. Its bold shades of purple, markdown editing, and excellent styling improve the developer’s experience and ability to scan code. This theme is a great mix of shades of purple with great feature color highlighting, making it easier for the developers to identify various attributes quickly.

Image Source: marketplace.visualstudio.com

Night Owl:

Dedicated to Night Owls out there! This theme is suitable for those who prefer coding late at the night. The color choices, background, and styling are chosen perfectly that help in low-light circumstances also. There’s also a Light Owl Theme that is created for easy viewing in daylight. You can disable italics if you wish as there is a no-italics theme also available.

Image Source: github.com

MonoKai Pro:

It is one of the popular and best vscode themes designed by the authors of the original Monokai colors. Carefully selected shades of colors, syntax highlighting, and pixel-perfect file icons of this theme ensure faster coding, non-distractive UI, and a smoother experience.

Image Source: marketplace.visualstudio.com

Ayu is a popular VSCode theme and comes in three versions – dark, light, and mirage. This simple, bright, and elegant theme is appreciated by developers who code for long hours. It is one of the top-rated and most downloaded themes for Visual Studio Code.

Image Source: marketplace.visualstudio.com

Palenight:

This juicy material-inspired theme uses minimal contrast across the first three variants. It is an elegant, clean, and beautiful theme created by Olaolu Olawuyi.

Image Source: marketplace.visualstudio.com

SynthWave ‘84:

Design inspiration can come from anywhere!

This experimental theme is influenced by the music and the cover artwork of modern Synthwave brands like FM-84, Timecop 1983, and The Midnight. This plain CSS theme is a little celebration of 80s aesthetics in modern web development. It enables the 80s neon dreams through glow effect and well-blended colors in the palette, making it one of the classy and elegant themes with a number of installs.

Image Source: marketplace.visualstudio.com

Noctis:

Noctis by Liviu Schera is a collection of light and dark themes with a well-balanced and visually appealing blend of warm and cold colors.

It is designed to be easy on the eyes, hence, reducing eye strain and give semantic meaning to colors used in this theme. There are 8 dark and 3 light versions. With various colors and the best syntax highlighting, this theme has gained good ratings and a number of installs.

Image Source: marketplace.visualstudio.com

Atom One (Dark & Light):

This popular VSCode theme is also available in the light version. It is based on Atom’s One Dark theme. Both versions – Atom One Dark Theme and Atom One Light Theme are the best-rated themes in the marketplace. This theme is created by Mahmoud Ali and features full Workbench theming.

Image Source: marketplace.visualstudio.com Image Source: marketplace.visualstudio.com

GitHub Theme:

This classic GitHub theme is available in light, dark, light default, dark default, and dark dimmed versions. These themes are similar to official GitHub.com themes and popular among developers who prefer GitHub’s classic themes.

Image Source: marketplace.visualstudio.com

One Monokai Theme:

One Monokai is a combination of Monokai and One Dark theme. It is designed with a well-chosen blend of colors and the best code editing functionalities that improve the developer experience.

It is one of the top-rated and mostly used dark vscode themes created by Joshua Azemoh. It is a clear, convenient, and captivating theme for Visual Studio Code.

Image Source: marketplace.visualstudio.com

Nord is an arctic, north-bluish, clean and elegant theme designed by Arctic Ice Studio.

Image Source: marketplace.visualstudio.com

Cobalt2 Theme Official:

This vscode theme is created by Wes Bos. It is easy on the eye, beautifully designed, and one of the top-rated themes in the market. Its handpicked colors and styles help developers focus on code and its clarity.

Image Source: marketplace.visualstudio.com

Why Choose Visual Studio Code As A Code Editor?

Firstly, it is very fast.

Visual Studio Code offers support for hundreds of languages, great for day-to-day use, and several advanced features such as auto-indention, IntelliSense code completion, snippets, syntax highlighting, and more.

It is obvious that more code means more debugging and more complexity. Visual Studio Code has an interactive debugger that helps view call stacks, inspect variables, and execute commands in the console.

Built-in support for Git and other scripting tools make developing faster than ever in VS Code. It is suitable for modern web development with rich tooling support for technologies like JSX/React, HTML, CSS, JavaScript, TypeScript, Less, and JSON.

It can be used for a wide range of applications and technologies that include cross-platform web and cloud applications. It offers great flexibility and a customizable environment that help developers to improve edit-build-debug experiences.

We have tried covering top themes for VS Code. If you are using a theme that is not here in this list, you can share via comments below! Also, we would like to hear about your developer experience. Let us know your favorite editor and theme you use that help make you productive.

Темы для vs code

Color themes let you modify the colors in Visual Studio Code’s user interface to suit your preferences and work environment.

Selecting the Color Theme

The active color theme is stored in your user settings (keyboard shortcut kb(workbench.action.openSettings) ).

Tip: By default, the theme is stored in your user settings and applies globally to all workspaces. You can also configure a workspace specific theme. To do so, set a theme in the Workspace settings.

Color Themes from the Marketplace

There are several out-of-the-box color themes in VS Code for you to try.

Many more themes have been uploaded to the VS Code Extension Marketplace by the community. If you find one you want to use, install it and restart VS Code and the new theme will be available.

You can search for themes in the Extensions view ( kb(workbench.view.extensions) ) search box using the @category:»themes» filter.

Auto switch based on OS color scheme

To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes with the settings:

Customizing a Color Theme

You can customize your active color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings.

You can use IntelliSense while setting workbench.colorCustomizations values or, for a list of all customizable colors, see the Theme Color Reference.

To customize a specific theme only, use the following syntax:

If a customization applies to more than one themes, you can name multiple themes or use * as wildcard at the beginning and the end of the name:

Editor syntax highlighting

To tune the editor’s syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file:

Note : Directly configuring TextMate rules is an advanced skill as you need to understand on how TextMate grammars work. Go to the Color Theme guide for more information.

Again, to customize specific themes, you can do this in one of the following ways:

Editor semantic highlighting

Some languages (currently: TypeScript, JavaScript, Java) provide semantic tokens. Semantic tokens are based on the language service’s symbol understanding and are more accurate than the syntax tokens coming from the TextMate grammars that are driven by regular expressions. The semantic highlighting that is computed from the semantic tokens goes on top of syntax highlighting and can correct and enrich the highlighting as seen in the following example:

The «Tomorrow Night Blue» color theme without semantic highlighting:

The «Tomorrow Night Blue» color theme with semantic highlighting:

Notice the color differences based on language service symbol understanding:

Users can override the theme setting by:

When semantic highlighting is enabled and available for a language, it is up to the theme to configure whether and how semantic tokens are colored. Some semantic tokens are standardized and map to well-established TextMate scopes. If the theme has a coloring rule for these TextMate scopes, the semantic token will be rendered with that color, without the need for any additional coloring rules.

Additional styling rules can be configured by the user in editor.semanticTokenColorCustomizations» :

To see what semantic tokens are computed and how they are styled, users can use the scope inspector (Developer: Inspect Editor Tokens and Scopes), which displays information for the text at the current cursor position.

More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.

Creating your own Color Theme

Creating and publishing a theme extension is easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.

VS Code’s Yeoman extension generator will help you generate the rest of the extension.

See the Create a new Color Theme topic in our Extension API section to learn more.

Remove default Color Themes

You can disable a built-in theme extension as you would any other VS Code extension with the Disable command on the gear context menu.

File Icon Themes

File icon themes can be contributed by extensions and selected by users as their favorite set of file icons. File icons are shown in the File Explorer and tabbed headings.

Selecting the File Icon Theme

By default, the Seti file icon set is used and those are the icons you see in the File Explorer. Once a file icon theme is selected, the selected theme will be remembered and appear again whenever VS Code is restarted. You can disable file icons by selecting None.

VS code ships with two file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file icon theme picker and you’ll see a query for file icon themes (tag:icon-theme) in the Extensions view.

You can also browse the VS Code Marketplace site directly to find available themes.

The active File Icon theme is persisted in your user settings (keyboard shortcut kb(workbench.action.openSettings) ).

Creating your own File Icon Theme

You can create your own File Icon Theme from icons (preferably SVG), see the File Icon Theme topic in our Extension API section for details.

Themes are just one way to customize VS Code. If you’d like to learn more about VS Code customization and extensibility, try these topics:

21 best VScode themes

Visual Studio Code is one of the Microsoft code editors that support multiple programming languages.

Being free and open-source, you can download and use it anytime and it works with all the operating systems.

It is very versatile and with the help of plugins and themes, your coding experience will be awesome with a unique look and feel that will create a pleasant environment for your productivity to thrive.

Visual Studio Code comes with some of the default themes that you do not require to install. You can download and install as many themes as possible.

Here are the 21 best VScode themes that will help you to change the appearance according to your preferred style.

1. Winter is coming light

Winter is coming light is a collection of 5 Visual Studio Code color themes namely; light, dack black, dark black no italics, dark blue and dark blue no italics. They come together as a package so it is necessary to install all of them even when you need one of them. It adds visible fonts to a light background which is best suited for daylight conditions.

Features:

2. Material Light

Material light is for you if you are a fan of Material Design. If you like the Material Design looks, you need to integrate with the Material Design Icon theme to change all the icons to Material icons in the entire editor interface.

Features:

3. Bluloco Light

Blucoco is one of the carefully designed light color themes. The colors in Blucoco reassures that research was done before arriving at the colors. You can switch between dark and light Blucoco if you want to.

Features:

4. Snazzy Light

Snazzy Light is a theme with light color and clear and brighter colors. Its Light theme is best for bright ambient conditions.

Features:

5. Noxtis Lux – Visual Studio Code

Noctis is a Visual Studio Code theme with 8 dark and 3 light colors. It helps to reduce eye strain with its light warm orange background.

Features:

6. Sandstorm

Sandstorm is a darkish Visual Studio Code theme that is neither based on black, grey nor bluey tint, common in dark UI themes. It has two variations; classic and darker.

7. Shades of Purple

Shades of purple is an elegant purple based color theme that uses yellow, green and orange variants for highlighting syntax.

Features:

8. Night Owl

Night Owl is a Visual Studio Code theme that was created with night users in mind. Frequent night workers will fall in love with Night Owl. It works better for people with color blindness. Night Owl light can work during the daylight conditions.

Features:

9. Dracula Official

Dracula Official is a Visual Studio Code official theme as the name suggests. It has been implemented in many code editors such as Vim, Xcode, Atom, Sublime Text and Note++. Dracula is great for those who cannot stand light for long.

Features:

10. One Dark Pro

One Dark Pro is the version of the Visual Studio Code from default Atom’s One Dark UI theme. If you are from Atom and still nostalgic about it, you can get the feel and look of Atom with this.

11. Synth Wave ’84

Synth Wave ’84 is a Visual Studio Code theme with awsome neon colors, wild ingredients, and flipping glow.

12. Arbiter

Arbiter is a Visual Studio Code theme that is easy on the eyes but still visible enough. It is a cool theme you should try if you are tired of other themes and I promise you, It has never disappointed.

13. Vue theme

Vue theme was created by their founders with Vue fans in mind. It has plenty of color choices and highlightings to show open where braces are open and closed.

Features:

14. Slack Theme

The slack theme is a Visual Studio Code theme with slack interface looks. At first, you might wonder how you can use this theme but I dare you to try it and you will fall in love with it. You might even consider using it full time in your coding.

Features:

15. Rainglow

Rainglow theme is possibly yours if you are looking for a Visual Studio Code theme with multiple built-in themes. It leaves the coders with a bunch of color combinations to choose from.

Features:

16. One dark pro

One dark pro is One of the best VScode theme ported from the Atom and one of the most downloaded themes for VS Code!

17. Material Theme

The material theme is well documented & brings the Material Design visual language to your Vs Code. This Vscode theme has lots of customization options.

18. Material Palenight Theme

An elegant and juicy material-like theme for Visual Studio Code.

19. One Monokai Theme

A cross between Monokai and One Dark theme

20. FlatUI

Flat & modern syntax theme for vs code

21. Hopscotch

Color scheme inspired by the Hopscotch learning platform for kids.

Conclusion

I hope this article has helped you in the search for good Visual Studio Code themes that fits and pleases your eyes. Consider also the fact that if you are not successful in your search for better themes you can still customize the existing ones and you are good. If you know one that you think is the best please let me know in the comments.

Top 30 Beautiful Visual Studio Code Themes

The most famous and popular point of Microsoft’s Visual Studio Code themes is the ability to customize. As the requirements of the users are applied to Visual studio code themes. So many people spend so much time beyond the interface and the experience of your editor. It will be very easy for you if you are using Visual Studio code themes. The themes which are already available for you it gives you permission to the developers of a new generation without any stoppage. However, there are so many themes are already available for the purpose of coding, It becomes so hard to choose the theme which is best for you.

So, we have created a big list of 30 visual studio code themes for your help.

One Dark Pro

It was termed as the best visual studio code themes for some time. This theme is basically based on One Dark theme of the Atom editor and has been downloaded for millions of time to date. It is not a small number and its popularity is increasing day by day. The pro version of One Dark gives very innovative features and ideas which make its use very easy.

Material Theme

When this was released it was a big surprise for all of us. Through the structured flexible elements of design, it also set the standard of modern UXs. The concept of Google’s material theme has also brightened the world of the visual studio code themes also. It is the most preferred theme for the developers who wants a minimal but elegant theme which can put you ways through its interfaces. The record number of downloads i.e. 2.4 million it speaks everything automatically.

Dracula Theme

This is the visual studio code theme for the modern world that is also chosen by the developers in the large amount because of its elegant designs and they are simple as well. This theme becomes more effective when you are working for many hours in the night. Other feature of this that it supports 50+ other applications also which doesn’t belong to Visual studio code. Developers refused to choose any light mode as they stated that “It can’t fulfil the requirements of the day.

Shades of Purple

This theme helps you in keeping the user fascinated every time they use their Linux text editor. It was developed by Ahmad Awais, and till date, there are more than 700,000 downloads of this theme. So, If you say that it the hottest themes to chose for the purpose of visual studio code so you will not be wrong in it. In short, this theme is the best theme for the developers who wants a mixture of gorgeous and aesthetic looking theme.

Night Owl

The name suggests that this theme is very suitable for the people who work late at night and usually prefer simple and dark themes so that it doesn’t give harm to their eyes. The contrast feature and meaningful colour of this theme make it very easy for your eyes to adapt to this theme. This theme is having more than 5 Lakh downloads. So if you are searching for the theme that is dark and easily adaptable to the eyes to this can be the boom for you.

Winter is Coming

This theme is a mixture of both the light and dark themes that are best for the purpose of using it in the editor of Visual Code. The number of download of this theme is exceeding 8 lakhs. The mixture of light and dark visuals helps for both the types of developers i.e. if you want to work at night you can enable dark mode and if you are a day terminator then light most is best for you. Overview f this theme is that it is a good choice if you are looking themes in the combo system.

Atom One Dark

According to its name, this theme is based on one Dark visual studio code theme that I have mentioned above of the Atom text editor. In terms of Atom, you cay say it as the most popular theme so, it becomes the first choice for the people who are getting their code visual studio from the atom. In the world of programming very few will be there who don’t know about this as it is having more than 13 lakh downloads. If your choice is to get going to Visual studio code and you are the user of Atom at the moment so this will the best option for you.

Monokai Pro

The colour scheme of this them is one of the best colour usage in the terms of visual studio code themes. This theme is getting support from so many people and it includes me too. The pro version of Monokai is the best example of the usage of the colour scheme. In the list of professional visual studio code themes, this refers to the most professional and it s also developed by the original author of the Monokai. It is having more than 5 lakh downloads which states the minds of the people that you are liking it very much.

It is a simple theme including the interface of light more, so according to that this can be the best visual studio code themes for your usage. The developers of this beautiful theme created this theme with the help of the warm colours. Overview of this is, it can be a good choice if you need a variable look without using so many resources.

Pale Night

This is another design which totally focuses on cleaning and consisting of its designs as the interface of this them is very much inspired by the Material design and thus it becomes so adaptable and relaxing to the eyes. The combination of the colours and the choices of designs are above the dignity level. Overview of this theme is that it is a good choice for people who want a variable visual direction.

Noctis

This is also a combination of dark and light themes that can be accessed and used at any place no matter what time it is. All the themes have a good balance of colour contrast. This makes the theme to be adaptable for eyes and also providing the best user view. So, if you choice is for having a wide range to select from then you should consider Noctis as the option.

This is a perfect example of making the theme inspiring for using it as visual studio code themes and the colour combination of this theme is very easy for the eyes to adapt and it completely reduces the stress on the eyes even if we use it for a long term. So if you have a habit of compiling your work at nigh like me so this can hit you hard, you should try this.

Atom One light

This theme is a lighter version of the famous theme named One Dark theme for Atom. It is the best choice of the user those who have recently come to visual code from Atom. This theme has already set its records by having downloads of more than 3 lakh times. So, if you are an Atom user and you want to get to Visual Studio Code so this theme can the best choice for you.

Panda Theme

This theme is basically suitable for people whose choice is a clean and concise interface. It is designed in such a manner as it is easily adaptable for the eyes and yet it implements a wide range of element designs. The dark format of these themes is very helpful for you and your eyes if you work for many hours continuously. This theme is a lightweight theme in this big list and yet gives many elegant designs.

One Monokai

If you are already admiring One Dark theme and Monokai so this theme is going to the boon for you. The name already suggests that this theme is the cross of these two most popular themes. The combination of colours and the contrast has made it very easy for use for a long period of time. It has the number of more than 6 lakhs downloads and also it is very popular among the developers these days.

Cobalt 2

This is another dark theme that is going to help you in concentrating on the code, rather than wasting your time on visual settings. It is becoming the most favourite visual studio code theme due to the ergonomic design it is having and helpful combination of colours. This theme is already having more than 3 lakh download so it is already very popular.

SynthWave’84

As the name is suggesting this theme is inspired by Synthwave to be used in Visual Studio code editor. The neon colour interface of this theme will take you back in 80’s movies and their posters. Overall, it is an inspiring theme whenever you want to make your things spicier.

Horizon

It is another visual studio code theme that uses bright and warm colour for the purpose of using in its interface. This theme is also the combination of both the dark and light format. Programmers usually use this theme as it giver permission to use the same theme both in night and day time. So overall this theme is focused on its points and if you like warm colours so this theme can be best for you.

Github Plus

As the name suggests it is strongly motivated by the colour theme of GitHub and this is a light coloured visual studio code theme. It is having a simplistic theme that gets matched with most of the environments. Overall the light format colour palette reduces stress on the eyes and it is very beneficial for the people who like to code during day time.

Andromeda

It is a dark colour theme which is trying very hard to match the lever of this universe in terms of its aesthetics. Moreover, the developers of these themes have done a fantastic job that it pleasing design of the interface and pragmatic design choices shows. So if your choice is the combination of warm colours and dark theme then this is the best for you.

Gruvbox

This theme is strongly motivated by a bad wolf, jellybeans and solarised. It is having a bright mode is designed with the help of ‘retro groove’ colours and it also gives you the option to switch from light mode to dark mode.

The main point that has been kept in mind while developing this was to choose good contrasting, colour combination and which is very easy to adapt by the eyes.

Tokyo Night

It is a clean and elegant theme, first, it was dark not it is light visual studio code theme that gives you the feel of the colours and lights of the downtown. This theme in my view is working best with semantic syntax highlighting turned off. For disabling these features, you have to search for or add this into our settings.

Remedy

This theme is having an orange colour elegant interface throughout the complete UI. This theme looks perfect for not only a single language but for all the languages like strings, type annotations, classes, language keyword etc. and also has the same colour interface i.e. whichever language you are using it will not change the interface of this theme.

Aurora X

This theme is the most gorgeous, innovative, aesthetic and technically very fascinating visual code studio theme. This theme is not just only limited for the use of designers but it also is used by a wide range of applications.

Glass UI

This theme was first made for using in the Atom but nowadays it is available for the most popular editor of text i.e. Visual Studio Code editor. The bright and light minimalistic design of UI is strongly motivated by the edge design of the mirror.

A Touch of Lilac

This is a fascinating theme that comes with Ui and it can also take you the various shades of colour with the flowers named lilac. One more version of this called, No-Italics is available for you people if you are going to prefer this you will be getting that version also. So, overall you have the option to make a choice between these two themes as this provides both the two themes and whichever you like you can prefer it to use.

Firefly Pro

It is a colourful dark theme that will glow in nigh if you prefer this and it is strongly inspired by Fireflies. This theme consists of two variants of dark themes named Firefly Pro and Firefly pro Midnight. It is very suitable for the professional coders who work in nigh and love this visual studio code theme. This has been tested as it was used for 6 hours continuously and it has been observed that there is no eyes burn or any other effect to eyes after that usage so it is easily adaptable by eyes. This theme is so colourful and it will highly motivate you to code at night.

Slime Theme

It is a dark syntax/workbench theme that can be used for VS code which is based on Atom. It has been developed to be used in SCSS, HTML, JS, TS, Markdown, PHP files. The used font in this is IBN plex Mono.

Celestial

This theme is the best theme for you if you love to code in deep dark spaces as it is having an elegant colourful dark theme. This will reduce stress to your eyes and it’ll not cause any burning to your eyes due to its dark theme. So, if you have a habit of coding at night this can be the option for you.

It is a simple and user-friendly visual studio code theme for the long time coders and if you want a friendly highlight to your code then also. It is a dark theme and colourful also so it will help you in many ways if you prefer this theme.

Ending thoughts

The most popular Linux code editor is visual studio code and it has many genuine reasons for becoming this much famous as it is a free available editor, the open-source editor that offers you a wide range of facilities and an approximately infinite range of abilities to customize.

You have a large range of themes and icon packs to choose from so that you can make you code best and very easily adaptable to your eyes.

In this article, you found 30 best visual code studio themes that you can choose for working on VS code very efficiently, gracefully and in such manner which is comfortable for your eyes.

I hope that you find the best theme for you that will help you in choosing the best theme for your code so that you can easily code for long hours without any side effect.

Do comment about which theme is the most suitable one according to your choice. I hope this article was helpful for you in choosing the theme. You can also check out our another article on Best IDEs for other alternatives for Visual Studio Code. Thank you for reading.

rainglow/vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Visual Studio Code

Rainglow is a collection of color themes for a number of different editors and platforms. This repository consists of 320+ syntax and UI themes for Visual Studio Code.

To show support for the project, you can do any (or many!) of the following:

To install the color themes, just use the extensions tab within VS Code and search for ‘Rainglow’.

Clone the repository into

/.vscode/extensions and restart the editor.

To override the status bar colors, add the following to your settings JSON. (Change the colors as you see fit.)

This project is an evolution of my colour schemes project found at https://github.com/daylerees/colour-schemes. Peacock was the first ever theme. I created it to try and find something to use other than Monokai. It’s now a favourite for many users!

If you’d like to report a bug with one of the color schemes, please raise an issue on the repository rather than submitting a pull request. This is because the themes run through a generation process, and editing the themes directly is not advised!

Color Theme

Colors visible in the Visual Studio Code user interface fall in two categories:

This guide will cover the different ways in which you can create themes.

Workbench colors

The easiest way to create a new workbench color theme is to start with an existing color theme and customize it. First switch to the color theme that you want to modify, then open your settings and make changes to the workbench.colorCustomizations setting. Changes are applied live to your VS Code instance.

The following, for example, would change the color of the title bar:

A complete list of all themable colors can be found in the color reference.

Syntax colors

First switch to the color theme to customize and use the editor.tokenColorCustomizations settings. Changes are applied live to your VS Code instance and no refreshing or reloading is necessary.

For example, the following would change the color of comments within the editor:

The setting supports a simple model with a set of common token types such as ‘comments’, ‘strings’ and ‘numbers’ available. If you want to color more than that, you need to use TextMate theme rules directly, which are explained in detail in the Syntax Highlighting guide.

Semantic colors

Semantic highlighting is available for TypeScript and JavaScript in VS Code release 1.43. We expect it to be adopted by other languages soon.

Semantic highlighting enriches syntax coloring based on symbol information from the language service, which has more complete understanding of the project. The coloring changes appear once the language server is running and has computed the semantic tokens.

Each theme controls whether to enable semantic highlighting with a specific setting that is part of the theme definition. The style of each semantic token is defined by the theme’s styling rules.

Users can override the semantic highlighting feature and colorization rules using the editor.tokenColorCustomizations setting:

Enable semantic highlighting for a specific theme:

Themes can define theming rules for semantic tokens as described in the Syntax Highlighting guide.

Create a new Color Theme

Generate a theme file using the Developer: Generate Color Theme from Current Settings command from the Command Palette

Use VS Code’s Yeoman extension generator to generate a new theme extension:

If you customized a theme as described above, select ‘Start fresh’.

Copy the theme file generated from your settings to the new extension.

Tip: ColorSublime has hundreds of existing TextMate themes to choose from. Pick a theme you like and copy the Download link to use in the Yeoman generator or into your extension. It will be in a format like «https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme»

Test a new Color Theme

To try out the new theme, press F5 to launch an Extension Development Host window.

There, open the Color Theme picker with File > Preferences > Color Theme and you can see your theme in the dropdown list. Arrow up and down to see a live preview of your theme.

Changes to the theme file are applied live in the Extension Development Host window.

Publishing a Theme to the Extension Marketplace

If you’d like to share your new theme with the community, you can publish it to the Extension Marketplace. Use the vsce publishing tool to package your theme and publish it to the VS Code Marketplace.

We also have recommendations on how to make your extension look great on the VS Code Marketplace, see Marketplace Presentation Tips.

Создание своей темы для Visual Studio Code

Visual Studio Code — новый редактор для разработчиков от компании Microsoft.

Конечно, на данный момент он уступает по количеству поддерживаемых функций широко распространённому Sublime Text, но при этом быстро «набирает обороты». Подтверждением тому является уже достаточно большой набор расширений в Visual Studio Marketplace.

В принципе, тем кто до этого пробовал редактор Sublime Text будет несложно найти много общего между этими продуктами как в визуальном оформлении, так и в наборе базовых возможностей.

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

Кроме готовых тем, можно создавать и свои, полностью отвечающие Вашим требованиям.

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

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

Установка своей темы в VS Code

1. Переходим в каталог %USER_PROFILE%\.vscode\extensions;
2. Создаём новый каталог с названием нашей темы;
3. Создаём в каталоге нашей темы файл package.json со следующим содержимым:

4. Создаём каталог themes и кладём в него нашу новую тему.

Готово. Теперь в меню «File»-«Preferences»-«Color Theme» Вы можете выбрать и применить свою тему.

Создание своей темы для Visual Studio Code

Visual Studio Code — новый редактор для разработчиков от компании Microsoft.

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

Кроме готовых тем, можно создавать и свои, полностью отвечающие Вашим требованиям.

Установка своей темы в VS Code

4. Создаём каталог themes и кладём в него нашу новую тему.

Готово. Теперь в меню «File»-«Preferences»-«Color Theme» Вы можете выбрать и применить свою тему.

How to: Personalize the Visual Studio IDE and the editor

In this how-to article, we’ll customize the Visual Studio color theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Dark. Here’s how to change it to a different color theme.

On the menu bar, select Tools > Options.

In the options list, select Environment > General.

In the Color theme list, choose between the default Dark theme, the Blue theme, the Blue (Extra Contrast) theme, and the Light theme. Or, choose the Use system setting option to select the theme that Windows uses.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

Want even more themes to choose from? Check out the wide range of custom themes on the Visual Studio Marketplace. And to see examples of new Visual Studio 2022 custom themes based on VS Code, take a look at the Introducing a collection of new Visual Studio themes blog post.

In this how-to article, we’ll customize the Visual Studio color theme from the blue theme to the dark theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Blue. Let’s change it to Dark.

On the menu bar, which is the row of menus such as File and Edit, choose Tools > Options.

On the Environment > General options page, change the Color theme selection to Dark, and then choose OK.

The color theme for the entire Visual Studio development environment (IDE) changes to Dark.

You can create your own themes by installing the Visual Studio Color Theme Designer from the Visual Studio Marketplace.

Change text colors in the editor

Now we’ll customize some text colors for the editor. First, let’s create a new XML file to see the default colors.

From the menu bar, choose File > New > File.

In the New File dialog box, under the General category, choose XML File, and then choose Open.

Notice that the line numbers are a turquoise-blue color, and the XML attributes (such as id=»bk101″ ) are a light blue color. We’re going to change the text color for these items.

To open the Options dialog box, choose Tools > Options from the menu bar.

Under Environment, choose the Fonts and Colors category.

Notice that the text under Show settings for says Text Editor—this is what we want. Expand the drop-down list just to see the extensive list of places where you can customize fonts and text color.

To change the color of the line numbers text, in the Display items list, choose Line Number. In the Item foreground box, choose Olive.

Some languages have their own specific fonts and colors settings. If you are a C++ developer and you want to change the color used for functions, for example, you can look for C++ Functions in the Display items list.

Before we exit out of the dialog box, let’s also change the color of XML attributes. In the Display items list, scroll down to XML Attribute and select it. In the Item foreground box, choose Lime. Choose OK to save our selections and close the dialog box.

The line numbers are now an olive color, and the XML attributes are a bright, lime green. If you open another file type, such as a C++ or C# code file, you’ll see that the line numbers also appear in the olive color.

We explored just a couple ways of customizing the colors in Visual Studio. We hope that you’ll explore the other customization options in the Options dialog box, to truly make Visual Studio your own.

Looking for info on how to download VS Code color themes and then import them into Visual Studio? Check out the Introducing a Collection of New Visual Studio Themes blog post for all the details.

10 Pretty Light Themes for VS Code

Light, lighter, lightest

The number of options you have when it comes to selecting a theme for VS Code is almost infinite. I’ve written an article before which went over pretty themes for VS Code. However, one attentive reader mentioned that all of these themes were dark themes.

Light themes are typically recommended when it comes to coding at daylight. Since most programmers will spend most of their time coding during the daytime, a pretty light theme is essential.

In this article, I’ll be sharing 10 awesome light themes for those of you who don’t like to code in a dark theme. The best part about it is that you could start using one of these themes right now. Let’s go ahead and optimize your coding experience!

Note that all these themes are available on the Visual Studio Marketplace for free.

1. Atom One Light

The Atom One Light theme is the light theme with the most installs. With over 300K installs this is a popular light theme. This theme is based on the Atom’s One Light theme and is one of the best-rated light themes in the marketplace.

2. Github Light

The Github Light theme is a clean looking theme that is very easy on the eyes. As you can tell by the name it is based on the look and feel of GitHub, so it should look familiar.

This theme comes in two varieties. One with a pure white background and one with a gray background. With almost 65K installs this is quite a widely used light theme.

The variation with the gray background, which I personally like a lot, looks like this:

3. Brackets Light Pro

Brackets Light Pro is an eye-catching theme due to its beautiful color palette. Just like the Github Light theme, it has almost 65K downloads which makes it one of the more often installed light themes.

Overall this theme has a very clean look and it’s really easy for the eyes.

4. Hop Light

According to its description, the Hop Light theme is a theme with friendly colors. What’s really good about this theme is the contrast — bright, but not too bright. The great contrast of this theme makes everything easy to read.

5. Snazzy Light

According to the author, the main goal of this theme is to show clear and distinct colors under bright ambient light conditions. This should make the theme suitable for the job even when having to deal with intense sunlight, for example.

If you like working in a theme with light colors, Snazzy Light is definitely for you.

6. Primer Light

Despite the fact this theme only has a little over 9K installs, the Primer Light is a great looking theme. This theme is a port of the Primer Light theme from Sublime Text. So this theme might look familiar to you if you’ve used Sublime Text before.

7. Monokai Light

The Monokai Light theme stands out because of its bright colors which are characteristic of the Monokai color scheme. This is the light equivalent of the various dark Monokai themes that are available on the Visual Studio Marketplace.

8. Bluloco Light

Bluloco Light is a fancy yet sophisticating theme with a wide variety of colors in the palette. This theme features a much more comprehensive usage of syntax scopes and color consistency, with due regards to aesthetics, contrast, and readability.

This theme was originally forked from the beautiful One Light Theme. With 90K installs, it is one of the more popular light themes.

9. Blue Light

The Blue Light theme is a theme with mostly blue colors — as you can tell by its name. The goal of this theme was to keep things as simple as possible. For example, in order to remove and avoid distractions only a few colors are used, both for UI and syntax coloring. On top of that, red colors only get used for errors.

10. Solarized Light

The Solarized Light theme comes both in a dark and light version. The light version of this theme has a very characteristic background color which you either love or hate.

If you don’t like the bold storage tokens (types and modifiers) then you could go with the Solarized Light (no bold) theme. This theme removed all the bold styling.

Material Theme

Equinusocio

Brought to you by

The most epic theme meets Visual Studio Code. You can help by reporting issues here.

Getting started

You can install this awesome theme through the Visual Studio Code Marketplace.

Installation

Launch Quick Open:

Paste the following command and press Enter :

And pick the one by Mattia Astorino (Equinusocio) as author.

Activate theme

Launch Quick Open:

Set the accent color

Launch Quick Open:

Override theme colors

You can override the Material Theme UI and schemes colors by adding these theme-specific settings to your configuration. For advanced customisation please check the relative section on the VS Code documentation.

Color Scheme override

Basic example

Advanced example

Recommended settings for a better experience

Official Portings

Thanks to the Material Theme community you can use it with other software, here are the official portings:

Other resources

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

How to: Change fonts, colors, and themes in Visual Studio

You can change the fonts and the colors in Visual Studio in several ways. For example, you can change the default dark theme (also referred to as «dark mode») to a light theme, a blue theme, an extra-contrast theme, or a theme that matches your system settings. You can also change the default font and text size in both the IDE and the code editor.

See the We’ve upgraded the UI in Visual Studio 2022 blog post to learn more about the subtle color contrast ratio adjustments and a new Cascadia Code font we’ve added to make Visual Studio more accessible for everyone.

You can change the fonts and the colors in Visual Studio in many ways. For example, you can change the default blue color theme to the dark theme (also referred to as «dark mode»). You can also select an extra-contrast theme if that best suits your needs. And, you can change the default font and text size in both the IDE and the code editor.

Change the color theme

Here’s how to change the color theme of the IDE frame and the tool windows in Visual Studio.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.

You can also choose to use the theme that Windows uses by selecting Use system setting.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

You can create and edit your own Visual Studio themes by using an extension. Choose from either of the following two options, depending on the version of Visual Studio you’re using:

Change fonts and text size

You can change the font and text size for all the IDE frame and tool windows, or for only certain windows or text elements. You can also change the font and text size in the editor, too.

To change the font and text size in the IDE

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

To change the font and text size in the editor

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

For more information about how to change fonts and colors for accessibility, see the Set accessibility options section of this page. And, for details about all the user interface (UI) elements where you can change font and color schemes, see the Fonts and Colors, Environment, Options Dialog Box page.

Set language-specific editor options

You can make a variety of changes to the code editor to suit your programming language of choice. For example, you can change brace formatting in C# to appear inline or on a new line, and more. To learn how to customize the code editor, see Set language-specific editor options.

Set accessibility options

In a neurodiverse world, we want to support our different learners and low-vision users by offering the following font options and color themes:

Use the Cascadia Code font

The new Cascadia Code font includes Cascade Mono, which is the default font in Visual Studio 2022. Not only are both of these fonts easier to read, but the Cascadia Code font also includes coding ligatures that turn a sequence of characters into a glyph. Coding ligatures, or glyphs, make it easier for people to cognitively associate the meaning behind them.

The following screenshot shows an example of the default Cascadia Mono font and lists a series of characters, to include mathematical symbols, that you might find yourself using while you code.

The following screenshot shows an example of the Cascadia Code font, where the same series of characters shown previously are now converted to coding ligatures, or glyphs.

Notice that the last line of text in the Cascadia Code screenshot shows how the space between duplicate characters is reduced, which also makes them easier to read.

Here’s how to toggle between the Cascadia fonts:

Go to Tools > Options > Environment > Fonts and colors.

From the Font dropdown list, select either the Cascadia Code font or the Cascadia Mono font you want, and then select OK.

There are color theme options for you if you experience low vision. You can use a high-contrast option for all the apps and UI on a computer, or an extra contrast option for Visual Studio only.

Use Windows high contrast

Use either of the following procedures to toggle the Windows high contrast option:

In Windows or in any Microsoft application, press the Left Alt+Left Shift+PrtScn keys.

In Windows, choose Start > Settings > Ease of Access. Then, under the Vision section in Windows 10 and later, choose High contrast.

The Windows high contrast setting affects all applications and UI on the computer.

Use Visual Studio extra contrast

Use the following procedures to toggle the Visual Studio extra contrast option:

On the menu bar in Visual Studio, choose Tools > Options, and then, in the options list, choose Environment > General.

In the Color theme drop-down list, choose the Blue (Extra Contrast) theme, and then choose OK.

If there is an accessibility option for colors or fonts that you think might be useful but isn’t currently available in Visual Studio, please let us know by selecting Suggest a feature in the Visual Studio Developer Community. For more information about this forum and how it works, see the Suggest a feature page.

More accessibility features in Visual Studio

Visual Studio also includes features to help people who have limited dexterity to write. For example, Visual Studio supports Dvorak keyboard layouts, which make the most frequently typed characters more accessible.

You can also customize the default keyboard shortcuts available with Visual Studio. For more information, see the following pages:

Visual Studio also includes auto-completion for methods and parameters; for more information, see IntelliSense in Visual Studio.

There are more ways to customize Visual Studio to be more accessible to you. For example, you can change the behavior of pop-up windows, text-based tool windows, toolbar buttons, margin indicators, and more.

The dialog boxes and menu commands you see might differ from those described here, which can vary depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Reset settings.

Change the behavior of pop-up windows

Visual Studio displays pop-up windows in the editor. These pop-up windows include information that makes coding easier, such as parameters to complete a function or statement. The pop-up windows can also be helpful if you have difficulty typing. However, some users might find that they interfere with focus in the code editor, which can be problematic.

Here’s how to turn off the pop-up windows:

From the Tools menu, choose Options.

Choose Text Editor > All Languages > General.

Clear the Auto list members and Parameter information checkboxes.

You can rearrange the windows in the integrated development environment (IDE) to best suit the way you work. You can dock, float, hide, or automatically hide each tool window. For more information about how to change window layouts, see Customize window layouts.

Change the settings of text-based tool windows

You can change the settings for text-based tool windows, such as the Command window, Immediate window, and Output window by using Tools > Options > Environment > Fonts and Colors.

When you select [All Text Tool Windows] in the Show settings for drop-down list, the default setting is listed as Default in the Item foreground and Item background drop-down lists. Choose the Custom button to change these settings.

You can also change the settings for how text is displayed in the editor. Here’s how.

From the Tools menu, choose Options.

Choose Environment > Fonts and Colors.

Select an option on the Show settings for drop-down menu.

To change the font size for text in an editor, choose Text Editor.

To change the font size for text in text-based tool windows, choose [All Text Tool Windows].

To change the font size for ToolTip text in an editor, choose Editor Tooltip.

To change the font size for text in statement completion pop-ups, choose Statement Completion.

From Display items, select Plain Text.

In Font, select a new font type.

In Size, select a new font size.

To reset the text size for text-based tool windows and editors, choose Use Defaults.

Choose OK.

Change the colors for text, margin indicators, white space, and code elements

You can choose to change the default colors for text, margin indicators, white space, and code elements in the editor. Here’s how.

From the Tools menu, choose Options.

In the Environment folder, choose Fonts and Colors.

In Show settings for, choose Text Editor.

From Display items, select an item whose display you need to change, such as Plain Text, Indicator Margin, Visible White Space, HTML Attribute Name, or XML Attribute.

Select display settings from the following options: Item foreground, Item background, and Bold.

Choose OK.

To use high contrast colors for all application windows on your operating system, press Left Alt+Left Shift+PrtScn. If Visual Studio is open, close and then reopen it to fully implement high contrast colors.

Add text to toolbar buttons or modify the text

To improve toolbar usability and accessibility, you can add text to toolbar buttons.

To assign text to toolbar buttons

From the Tools menu, choose Customize.

In the Customize dialog box, select the Commands tab.

Select Toolbar, and then choose the toolbar name that contains the button you intend to display text for.

In the list, select the command you intend to change.

Choose Modify Selection.

Choose Image and Text.

To modify the displayed text in a button

Re-select Modify Selection.

Adjacent to In Name, insert provide a new caption for the selected button.

Accessibility support

For more information about features, products, and services that make Windows more accessible for people with disabilities, see Accessibility products and services from Microsoft. And, for more information about how to obtain more accessible formats of documentation for Microsoft products, see the Documentation in alternative formats section of the Accessibility products and services from Microsoft page.

The accessibility information included on this page might apply only to users who license Microsoft products in the United States. If you obtained this product outside of the United States, visit the Microsoft Accessibility website for a list of Microsoft support services telephone numbers and addresses. You can contact your subsidiary to find out whether the type of products and services described on this page are available in your area. Information about accessibility is also available in other languages.

How to: Change fonts, colors, and themes in Visual Studio

Change the color theme

Here’s how to change the color theme of the IDE frame and the tool windows in Visual Studio.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.

You can also choose to use the theme that Windows uses by selecting Use system setting.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

You can create and edit your own Visual Studio themes by using an extension. Choose from either of the following two options, depending on the version of Visual Studio you’re using:

Change fonts and text size

You can change the font and text size for all the IDE frame and tool windows, or for only certain windows or text elements. You can also change the font and text size in the editor, too.

To change the font and text size in the IDE

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

To change the font and text size in the editor

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

Set language-specific editor options

Set accessibility options

In a neurodiverse world, we want to support our different learners and low-vision users by offering the following font options and color themes:

Use the Cascadia Code font

The following screenshot shows an example of the default Cascadia Mono font and lists a series of characters, to include mathematical symbols, that you might find yourself using while you code.

The following screenshot shows an example of the Cascadia Code font, where the same series of characters shown previously are now converted to coding ligatures, or glyphs.

Notice that the last line of text in the Cascadia Code screenshot shows how the space between duplicate characters is reduced, which also makes them easier to read.

Here’s how to toggle between the Cascadia fonts:

Go to Tools > Options > Environment > Fonts and colors.

From the Font dropdown list, select either the Cascadia Code font or the Cascadia Mono font you want, and then select OK.

There are color theme options for you if you experience low vision. You can use a high-contrast option for all the apps and UI on a computer, or an extra contrast option for Visual Studio only.

Use Windows high contrast

Use either of the following procedures to toggle the Windows high contrast option:

In Windows or in any Microsoft application, press the Left Alt+Left Shift+PrtScn keys.

In Windows, choose Start > Settings > Ease of Access. Then, under the Vision section in Windows 10 and later, choose High contrast.

The Windows high contrast setting affects all applications and UI on the computer.

Use Visual Studio extra contrast

Use the following procedures to toggle the Visual Studio extra contrast option:

On the menu bar in Visual Studio, choose Tools > Options, and then, in the options list, choose Environment > General.

In the Color theme drop-down list, choose the Blue (Extra Contrast) theme, and then choose OK.

More accessibility features in Visual Studio

You can also customize the default keyboard shortcuts available with Visual Studio. For more information, see the following pages:

Visual Studio also includes auto-completion for methods and parameters; for more information, see IntelliSense in Visual Studio.

Change the behavior of pop-up windows

Here’s how to turn off the pop-up windows:

From the Tools menu, choose Options.

Choose Text Editor > All Languages > General.

Clear the Auto list members and Parameter information checkboxes.

Change the settings of text-based tool windows

You can also change the settings for how text is displayed in the editor. Here’s how.

From the Tools menu, choose Options.

Choose Environment > Fonts and Colors.

Select an option on the Show settings for drop-down menu.

To change the font size for text in an editor, choose Text Editor.

To change the font size for text in text-based tool windows, choose [All Text Tool Windows].

To change the font size for ToolTip text in an editor, choose Editor Tooltip.

To change the font size for text in statement completion pop-ups, choose Statement Completion.

From Display items, select Plain Text.

In Font, select a new font type.

In Size, select a new font size.

To reset the text size for text-based tool windows and editors, choose Use Defaults.

Choose OK.

Change the colors for text, margin indicators, white space, and code elements

You can choose to change the default colors for text, margin indicators, white space, and code elements in the editor. Here’s how.

From the Tools menu, choose Options.

In the Environment folder, choose Fonts and Colors.

In Show settings for, choose Text Editor.

From Display items, select an item whose display you need to change, such as Plain Text, Indicator Margin, Visible White Space, HTML Attribute Name, or XML Attribute.

Select display settings from the following options: Item foreground, Item background, and Bold.

Choose OK.

Add text to toolbar buttons or modify the text

To improve toolbar usability and accessibility, you can add text to toolbar buttons.

To assign text to toolbar buttons

From the Tools menu, choose Customize.

In the Customize dialog box, select the Commands tab.

Select Toolbar, and then choose the toolbar name that contains the button you intend to display text for.

In the list, select the command you intend to change.

Choose Modify Selection.

Choose Image and Text.

To modify the displayed text in a button

Re-select Modify Selection.

Adjacent to In Name, insert provide a new caption for the selected button.

Accessibility support

How to: Personalize the Visual Studio IDE and the editor

In this how-to article, we’ll customize the Visual Studio color theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Dark. Here’s how to change it to a different color theme.

On the menu bar, select Tools > Options.

In the options list, select Environment > General.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

In this how-to article, we’ll customize the Visual Studio color theme from the blue theme to the dark theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Blue. Let’s change it to Dark.

On the menu bar, which is the row of menus such as File and Edit, choose Tools > Options.

On the Environment > General options page, change the Color theme selection to Dark, and then choose OK.

The color theme for the entire Visual Studio development environment (IDE) changes to Dark.

You can create your own themes by installing the Visual Studio Color Theme Designer from the Visual Studio Marketplace.

Change text colors in the editor

Now we’ll customize some text colors for the editor. First, let’s create a new XML file to see the default colors.

From the menu bar, choose File > New > File.

In the New File dialog box, under the General category, choose XML File, and then choose Open.

Notice that the line numbers are a turquoise-blue color, and the XML attributes (such as id=»bk101″ ) are a light blue color. We’re going to change the text color for these items.

To open the Options dialog box, choose Tools > Options from the menu bar.

Under Environment, choose the Fonts and Colors category.

To change the color of the line numbers text, in the Display items list, choose Line Number. In the Item foreground box, choose Olive.

Looking for info on how to download VS Code color themes and then import them into Visual Studio? Check out the Introducing a Collection of New Visual Studio Themes blog post for all the details.

VSCode: Create your own custom theme extension

Do you want to create your own custom theme extension for Visual Studio Code? This article will guide you through the whole process and rules ensuring you experience as little issues as possible during the process of creation!

First things first you’ll need to have Node.js and Git installed in order to be able to install the necessary packages.

Using npm install yo (yes, that’s the real package name — short for Yeoman)

Open a Terminal and guide to the directory where you want to create your theme, and run the following command:

This will run the Visual Studio Code Extension ( vsce) generator, and here you will navigate using the up-and-down arrow keys and press enter to make a selection.

yo code short guide:

You have successfully created a theme project! Now run the following commands to open it and to start working!

Inside you will find a folder named themes that will contain the theme JSON file. Open the file, run the debugger and happy theming!

Once you are done and have created your theme, it’s time to publish and share with the world!

Create a git repository (to avoid issues, use GitHub) for your project and connect it. Push your whole theme and open up the package.json file.

Inside you will need to configure the git repository, icon, author and all of the marketplace data, which should end up looking something like this:

Now it’s time to package and publish the theme using vsce:

Head over to Azure DevOps and create your organization under which you will publish your extensions https://dev.azure.com/

Once you’ve done that, you’ll need to create your own Personal Access Token (PAT) for that organization.

However, you will want to be careful with this otherwise you will end up getting a 401 error. (vsce 401 error)

When you are creating your PAT you MUST select “ All Accessible Organizations”!

Otherwise you will end up receiving the dreaded “Error: Failed Request: Unauthorized(401)”

There is just one more annoying thing you have to do and you will be ready to publish! You will need to create a Publisher.

I prefer to do this directly by using the following link https://marketplace.visualstudio.com/manage/createpublisher, however you can also run the following command and create it that way:

I recommend that you use the link and avoid the vsce shortcut for this, but it is completely up to you.

Inside the Terminal, login to your publisher:

Package the theme you created:

That was it! You have just published your very own VSCode theme!

In a matter of minutes your theme will live on the Visual Studio Marketplace! To follow you extensions and their status head to https://marketplace.visualstudio.com/manage/publishers/

It’s a great pleasure to help and guide people, and because of that I do hope that you found this article handy. 🧡

🚀 You can help me grow by sharing this article, and feel free to connect with me on LinkedIn!

How to: Personalize the Visual Studio IDE and the editor

In this how-to article, we’ll customize the Visual Studio color theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Dark. Here’s how to change it to a different color theme.

On the menu bar, select Tools > Options.

In the options list, select Environment > General.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

In this how-to article, we’ll customize the Visual Studio color theme from the blue theme to the dark theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Blue. Let’s change it to Dark.

On the menu bar, which is the row of menus such as File and Edit, choose Tools > Options.

On the Environment > General options page, change the Color theme selection to Dark, and then choose OK.

The color theme for the entire Visual Studio development environment (IDE) changes to Dark.

You can create your own themes by installing the Visual Studio Color Theme Designer from the Visual Studio Marketplace.

Change text colors in the editor

Now we’ll customize some text colors for the editor. First, let’s create a new XML file to see the default colors.

From the menu bar, choose File > New > File.

In the New File dialog box, under the General category, choose XML File, and then choose Open.

Notice that the line numbers are a turquoise-blue color, and the XML attributes (such as id=»bk101″ ) are a light blue color. We’re going to change the text color for these items.

To open the Options dialog box, choose Tools > Options from the menu bar.

Under Environment, choose the Fonts and Colors category.

To change the color of the line numbers text, in the Display items list, choose Line Number. In the Item foreground box, choose Olive.

Looking for info on how to download VS Code color themes and then import them into Visual Studio? Check out the Introducing a Collection of New Visual Studio Themes blog post for all the details.

Theme by language

Julien Saulou

Theme by language

Themes are great but sometimes some are better than others for a certain language.

This extension lets you select which theme to apply by language.

If you prefer, like me, to edit Markdown and AsciiDoc files using a dark theme but code using a light theme, or prefer the coloration of a theme for a specific language, this extension is made for you.

Preview

How to use

Important: If you have set a theme for a language, changing the color theme using the standard vscode menu will not work. To change the default theme, use the Set default theme command.

Set default theme fallback

Use the command Set default theme to set the default theme. This theme will be used for all file languages that do not have a custom theme set.

Set custom theme for a filetype

Open a file and use the command Set theme for current file language to set the theme to use for this file language.

Clear all custom themes

Limitations

Special thanks to @MrDoomy for creating the logo!

Появился сервис для быстрого и бесплатного создания своих тем для Visual Studio Code

Разработчик Майк Тромба (Mike Tromba) представил сервис VS Code Theme Studio. Он позволяет создавать собственные темы для Visual Studio Code в интуитивно понятном веб-интерфейсе. После завершения работы пользователь получает JSON-файл с параметрами темы.

На сайте доступны две опции. Первая — создание темы с нуля. Пользователь указывает, какой тип ему нужен: светлая или тёмная тема. После этого открывается интерфейс визуального редактора, который предлагает 3 вкладки:

Вторая опция — форк готового шаблона и его изменение в том же визуальном редакторе.

Интерфейс VS Code Theme Studio

В планах у разработчика — реализовать автоматическое добавление созданной темы на маркетплейс Visual Studio Code. Сейчас пользователи могут только скачать файл JSON. Публиковать тему на маркетплейсе нужно самостоятельно.

20 Best Visual Studio Code Themes You Should Use

Microsoft’s Visual Studio Code is arguably one of the best code editors out there. With its vast collection of community-supported extensions, you can use VS Code to fuel almost all of your programming needs. The app is available across Windows, macOS, and Linux, making it the perfect program to write code on, regardless of the operating system. One key aspect of VS Code is its customizability and robust theming capabilities. While the default themes are good enough, there are many other visually pleasing themes that you should not miss out on. Here are the 20 best Visual Studio Code themes you should try in 2022.

Best Visual Studio Code Themes to Try in 2022

1. Ariake Dark

2. Rosé Pine

3. Celestial

Celestial is a darker version of another popular VS Code theme, Horizon. While Horizon is a great theme by itself, Celestial offers a darker background color which I prefer. Although Celestial is my personal favorite on this list, it might be an acquired taste if you don’t often use and appreciate truly dark themes. You could give Horizon (scroll down to the sixth theme on this list) a try if you don’t want such a dark background but like the color scheme used here.

4. In Bed By 7pm

In Bed by 7pm is a theme from the creator of widely used VS Code theme Night Owl (added in the seventh position on this list). As the name suggests, this theme is best suited for those who don’t often stay up late for coding sessions. This theme has excellent contrast levels to help you effortlessly differentiate various elements in the code.

Note: Have trouble sleeping? Check out our favorite ASMR apps that can help you fall asleep.

5. ReUI

If you’re searching for a VS Code theme, chances are, you’ve visited React JS’ official website at least once. If you fancy the color palette used in React website’s code snippets, the ReUI theme brings it to VS Code. The result is an aesthetic theme with colors that go easy on the eyes.

6. Horizon

As mentioned earlier, Horizon is the base of the Celestial theme. Horizon is a warm theme with a rich color palette that manages to stand out from the crowd. Further, the developer has given a few recommendations to adjust contrast, remove italics, and gray brackets in the theme’s listing to tweak the theme as per your preference.

7. Night Owl

Night Owl is a theme created with accessibility in mind. It offers a neat contrast for better readability, and the color scheme here is such that it would not feel uncomfortable to people with colorblindness. This theme meets the needs of those who often find themselves working late into the night.

8. Andromeda

Andromeda is a theme with vibrant colors and a dark background. The developer has also created a variant of this theme with italic keywords that go well with fonts, including Operator Mono and Catograph Mono. There’s also a bordered variant if you like having a separate distinction between multiple tabs.

9. Nord

Nord VS Code theme is based on Arctic Ice Studio’s Nord color palette inspired by the beauty of the arctic. One noteworthy part of Nord is that its color scheme even extends to popular third-party syntax extensions to offer you a unified experience. If you are someone who likes minimal setups, you will probably admire this theme. However, it may look a bit too pale in bright lighting conditions.

10. Tokyo Night

As the name hints, Tokyo Night is a theme that celebrates the beautiful night lights of downtown Tokyo. It intentionally sets many UI elements to low-contrast so as not to distract coders. The theme comes bundled with two additional variants, namely Tokyo Night Light and Tokyo Night Storm. In the theme’s listing, the developer recommends disabling semantic syntax highlighting from settings for best results. There are also configurations for disabling italics, brightening Codelens text, and customizing active and inactive borders.

11. Mayukai Mirage

Mayukai Mirage takes inspiration from several other VS Code themes, including Ayu theme, Material theme, Monokai, Andromeda, and Gruvbox Darktooth. According to the creator, this theme is ideal for day-long programming work. There are seven different variants of Mayukai, including Mirage, Semantic Mirage, Dark, Mirage Gruvbox Darktooth, Mono, Alucard, and Sunset. My favorite will, however, has to be the original Mayukai Mirage theme.

12. One Dark Pro

Before VS Code went mainstream, the Atom code editor was the preferred choice of many developers, and there’s no denying that Atom’s One Dark theme looks great. If you miss Atom’s one dark theme, then One Dark Pro is what you need to install on VS Code. The creators of this theme have also included snippets in the listing to help you customize the colors and add italics to the UI.

13. LaserWave

LaserWave is an 80’s synthwave-inspired theme with a warm retro look and feel. It currently supports Python, React JS, Angular, Ruby, Markdown, Java, C#, and Dart. If you’re looking for a theme that isn’t dark and works well with your lo-fi playlist, you won’t go wrong with LaserWave. It has a unique feel, and you are going to love it.

14. Darcula

Darcula (not to be confused with the popular Dracula Official) brings the familiar Darcula theme seen on Jetbrains IDEs and Android Studio to VS Code. However, the creator points out that there are a few modifications in tow to deliver a better experience to programmers. You can use this theme for a unified experience if you use Jetbrains’ IDE offerings.

15. City Lights

Another great VS Code theme is City Lights that brings predominant matte dark blue tones. It supports over eight popular programming languages. While you try this theme, make sure you don’t miss out on the City Lights icon package with over 60 file-type icons. It is also available for other popular code editors such as Sublime Text and Atom.

16. Quiet Light

Quiet Light is an official port of the Quiet Light theme, built first for the Espresso text editor on Mac. Although VS Code comes with a Quiet Light theme, this version is as good as it gets since has been developed by the original designer. The theme supports HTML / CSS / LESS / SCSS, JavaScript, PHP, Python, Markdown, and more. If you like the default Quiet Light theme, chances are, you’ll love this theme.

17. GitHub Theme

GitHub is an official VS Code theme that brings the GitHub experience to VS Code. If you like the look and feel of the code hosting platform, you will feel right at home on switching to this theme.

18. Brackets Light Pro

Brackets Light Pro ports Adobe’s Brackets code editor’s light theme to VS Code. If you’re someone migrating to VS Code from Brackets since Adobe has ended support for Brackets from September 1, 2021, you’ll enjoy using the Brackets Light Pro theme. The recommended fonts and icons for this theme are Fantasque Sans Mono and VSCode Great Icons.

Download Brackets Light Pro Theme

19. Aofuji Light

Aofuji Light is a minimal theme for VS Code. This theme is relatively new, and the syntax highlighting has been tested with HTML, JavaScript, CSS, and Markdown files. If you prefer light themes, you can give Aofuji Light a shot to see if it fits perfectly in your workflow.

20. Bluloco Light

Lastly, we have Bluloco Light theme. It is a fork of the One Light theme with a Bluloco color palette that’s visually pleasing. This theme looks good even when you have Apple’s NightShift mode enabled, as per the creator. It means the theme plays along well with a blue light filter.

VS Code Themes to Rejuvenate Your Coding Experience

These are our picks for the best Visual Studio Code themes. We hope this article helps you pick a new theme and give the overall aesthetic of your coding setup a facelift. So, which of these Visual Studio Code themes do you like the most? Let us know in the comments section below. Also, if you use a theme that we haven’t mentioned but should be on the list, do not hesitate to share it with others in the comments.

Top 5 Themes for Visual Studio Code

My editor choice is Visual Studio Code since the first beta release.
I like personalize everything in my editor and Visual Studio Code is perfect in this way.

Here I will show my Top 5 favourite Visual Studio Code theme.

Night Owl

One of the best theme for Visual Studio Code (and others editor. ).
This is my current theme for work.

Winter is Coming

Developed by John Papa from Microsoft, I love it.

Shades of Purple

Well documented and professional theme. Awesome!

Rainglow

Many color themes. Try it!

Noctis

My second favourite theme, after Night Owl.
This is the best to relax your eyes after a long working day.

Power Mode

It’s not a real theme, but I like this effect when I have a presentation or a demo with customer. 🙂

How to: Personalize the Visual Studio IDE and the editor

In this how-to article, we’ll customize the Visual Studio color theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Dark. Here’s how to change it to a different color theme.

On the menu bar, select Tools > Options.

In the options list, select Environment > General.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

In this how-to article, we’ll customize the Visual Studio color theme from the blue theme to the dark theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Blue. Let’s change it to Dark.

On the menu bar, which is the row of menus such as File and Edit, choose Tools > Options.

On the Environment > General options page, change the Color theme selection to Dark, and then choose OK.

The color theme for the entire Visual Studio development environment (IDE) changes to Dark.

You can create your own themes by installing the Visual Studio Color Theme Designer from the Visual Studio Marketplace.

Change text colors in the editor

Now we’ll customize some text colors for the editor. First, let’s create a new XML file to see the default colors.

From the menu bar, choose File > New > File.

In the New File dialog box, under the General category, choose XML File, and then choose Open.

Notice that the line numbers are a turquoise-blue color, and the XML attributes (such as id=»bk101″ ) are a light blue color. We’re going to change the text color for these items.

To open the Options dialog box, choose Tools > Options from the menu bar.

Under Environment, choose the Fonts and Colors category.

Notice that the text under Show settings for says Text EditorвЂ”this is what we want. Expand the drop-down list just to see the extensive list of places where you can customize fonts and text color.

To change the color of the line numbers text, in the Display items list, choose Line Number. In the Item foreground box, choose Olive.

Looking for info on how to download VS Code color themes and then import them into Visual Studio? Check out the Introducing a Collection of New Visual Studio Themes blog post for all the details.

How to: Change fonts, colors, and themes in Visual Studio

Change the color theme

Here’s how to change the color theme of the IDE frame and the tool windows in Visual Studio.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.

You can also choose to use the theme that Windows uses by selecting Use system setting.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

You can create and edit your own Visual Studio themes by using an extension. Choose from either of the following two options, depending on the version of Visual Studio you’re using:

Change fonts and text size

You can change the font and text size for all the IDE frame and tool windows, or for only certain windows or text elements. You can also change the font and text size in the editor, too.

To change the font and text size in the IDE

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

To change the font and text size in the editor

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

Set language-specific editor options

Set accessibility options

In a neurodiverse world, we want to support our different learners and low-vision users by offering the following font options and color themes:

Use the Cascadia Code font

The following screenshot shows an example of the default Cascadia Mono font and lists a series of characters, to include mathematical symbols, that you might find yourself using while you code.

The following screenshot shows an example of the Cascadia Code font, where the same series of characters shown previously are now converted to coding ligatures, or glyphs.

Notice that the last line of text in the Cascadia Code screenshot shows how the space between duplicate characters is reduced, which also makes them easier to read.

Here’s how to toggle between the Cascadia fonts:

Go to Tools > Options > Environment > Fonts and colors.

From the Font dropdown list, select either the Cascadia Code font or the Cascadia Mono font you want, and then select OK.

There are color theme options for you if you experience low vision. You can use a high-contrast option for all the apps and UI on a computer, or an extra contrast option for Visual Studio only.

Use Windows high contrast

Use either of the following procedures to toggle the Windows high contrast option:

In Windows or in any Microsoft application, press the Left Alt+Left Shift+PrtScn keys.

In Windows, choose Start > Settings > Ease of Access. Then, under the Vision section in Windows 10 and later, choose High contrast.

The Windows high contrast setting affects all applications and UI on the computer.

Use Visual Studio extra contrast

Use the following procedures to toggle the Visual Studio extra contrast option:

On the menu bar in Visual Studio, choose Tools > Options, and then, in the options list, choose Environment > General.

In the Color theme drop-down list, choose the Blue (Extra Contrast) theme, and then choose OK.

More accessibility features in Visual Studio

You can also customize the default keyboard shortcuts available with Visual Studio. For more information, see the following pages:

Visual Studio also includes auto-completion for methods and parameters; for more information, see IntelliSense in Visual Studio.

Change the behavior of pop-up windows

Here’s how to turn off the pop-up windows:

From the Tools menu, choose Options.

Choose Text Editor > All Languages > General.

Clear the Auto list members and Parameter information checkboxes.

Change the settings of text-based tool windows

You can also change the settings for how text is displayed in the editor. Here’s how.

From the Tools menu, choose Options.

Choose Environment > Fonts and Colors.

Select an option on the Show settings for drop-down menu.

To change the font size for text in an editor, choose Text Editor.

To change the font size for text in text-based tool windows, choose [All Text Tool Windows].

To change the font size for ToolTip text in an editor, choose Editor Tooltip.

To change the font size for text in statement completion pop-ups, choose Statement Completion.

From Display items, select Plain Text.

In Font, select a new font type.

In Size, select a new font size.

To reset the text size for text-based tool windows and editors, choose Use Defaults.

Choose OK.

Change the colors for text, margin indicators, white space, and code elements

You can choose to change the default colors for text, margin indicators, white space, and code elements in the editor. Here’s how.

From the Tools menu, choose Options.

In the Environment folder, choose Fonts and Colors.

In Show settings for, choose Text Editor.

From Display items, select an item whose display you need to change, such as Plain Text, Indicator Margin, Visible White Space, HTML Attribute Name, or XML Attribute.

Select display settings from the following options: Item foreground, Item background, and Bold.

Choose OK.

Add text to toolbar buttons or modify the text

To improve toolbar usability and accessibility, you can add text to toolbar buttons.

To assign text to toolbar buttons

From the Tools menu, choose Customize.

In the Customize dialog box, select the Commands tab.

Select Toolbar, and then choose the toolbar name that contains the button you intend to display text for.

In the list, select the command you intend to change.

Choose Modify Selection.

Choose Image and Text.

To modify the displayed text in a button

Re-select Modify Selection.

Adjacent to In Name, insert provide a new caption for the selected button.

Accessibility support

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another.

It’s been an item on my bucket list to create my own theme. I was coding very late the one night, well into the small hours of the morning. Everyone in my house was sleeping and so, as usual, the only light was the glow of my screen. I know it’s not necessarily healthy to code like this, but it’s literally the time I’m most productive: there are minimal distractions, I’m not dealing with work stuff, family stuff, friend stuff, or puppy stuff. I can focus.

I had some preferences set for the theme I had been using and, though they all worked well for daytime or plane rides, I always felt like something was missing for late night coding sessions. I decided it was time to craft my own theme.

We’ll talk first about the general process for creating a theme in case you’d like to create one of your own, and then we’ll dive into some of the research and testing that went into mine in particular to peek into the process.

Before you do anything, you’re going to install vsce (short for Visual Studio Code Extensions) and establish yourself as a publisher. All of the instructions to do so are here. I know it looks like a lot, but it takes anywhere from 5-10 minutes, and then you’ll never have to do it again, for any extension you create.

Now that you’ve got that under your belt, here are the steps you need to start work.

First, you need to run:

This makes the generator globally available on your machine (meaning you can now create a theme in any directory). You can then execute this command to kick off your theme:

You will be prompted by a screen that looks like this:

Note that I’ve used the arrows here to navigate to the “New Color Theme” option. Note also that this is how you’d want to make any other extension.

When selecting this, it asks if this is a new theme or if we want to import from an existing one. We want to create a new one.

Next, you’ll have to answer a few other questions, including:

It will set you up with a base theme to start skinning your color preferences. The full scoop and all the details are here. More details about themes in general are here.

We have our base theme and we have some concepts for the palette. So, how do we test it out? When you open the directory with your theme, you can press fn + f5 on Mac (or just f5 on Windows) and a new window immediately pops open where you can test your theme! You’ll see in the original theme window that you now have a little control panel where you can reload, pause, and stop. Don’t forget to save before you do!

OK, now that you have the other window open, hit Command + Shift + P to get the command explorer. In there type, “Developer: Inspect TM Scopes” and you’ll see a prompt come up that allows you to look through all the tags and attributes: it will tell you their color, their font styles, and how you need to target it.

There is one problem, though. There are a lot of things in the editor you can’t target because VS Code will interpret that as you trying to drive the rest of the editor (i.e. the file viewer, the terminal, and the search boxes). Here are the two ways I found to figure out the rest of the scopes:

Another Small Tip!

Research for a code theme? Isn’t that over the top? Probably! But I was genuinely curious: what would work best for legibility for the vast majority of people, while still being something I liked?

Color and contrast

The first step was considering accessibility. I always liked how solarized themes made legibility a central theme to their palettes. I read about color retention and accessibility, and it turns out that men have a really high incidence of colorblindness (around 8% for men, 1% for women). The majority of programmers are men, so even though I am not colorblind, it was a no-brainer to craft the theme at least partially around including those with colorblindness. The most typical is red/green deficiency so I found a few good ways to test with my favorite being, funnily enough, a bit manual.

I originally started by testing random images to see if I could discern a pattern that I could match. One thing I noticed while testing was that complementary colors seemed to perform the best across all tests. However, if three colors needed to be tested at once, a triad color composition also produced good results.

If you’re unfamiliar with color relationships, Adobe Color CC (previously Kuler) makes it easier to visualize and you can even create a color palette directly in the editor.

It’s extremely important to know that a color is only a color in reference to another color. This is part of what makes crafting a color theme so difficult. Color isn’t static, it’s all about relationships. You’re probably a little familiar with this in terms of accessibility. A light green on a black may be accessible, but when you change it to a white background it no longer is.

Accessibility in color can be measured with a number of tools. Here are some of my favorites:

It’s also really nice to set up your palette for accessibility from the start. Color Safe is a great tool that helps with that.

I cover more details about color and perception in this post: A Nerd’s Guide to Color on the Web.

Colors and Reading Comprehension

Another piece of this was learning which colors, if any, had an effect on reading comprehension. In some studies, it’s been shown that black text on white background, such as used in some light themes, can be difficult for comprehension. The theory is that the use of overlays to change the text color has improved cognitive awareness for many, especially those with dyslexia and autism. However, these studies are controversial and it’s inconclusive whether the overlays are effective in comprehension or a preference.

There is a syndrome called Irlen, or Scotopic Sensitivity Syndrome (SSS) that is known to interfere with the ability to discern letters and words. It is a visual perception disability on the magnocellular level — the visual pathway that can help with scanning and comprehension. This has been thought to be connected to — reading with impairment under certain types of light, and some think it can affect up to 50% of people (again, this figure is controversial and inconclusive).

We’re still learning about SSS, but there are some studies that color overlays can help focus attention to the text and reduce eyestrain. The colors found to increase readability and contrast so far for those with SSS have been beige, goldenrod, green, pink and blue. Blue has shown thus far to have the strongest link for people with Reading Disability and Attention Deficit/Hyperactivity Disorder.

Despite the fact that these studies haven’t reached statistical signifigance from what I can gather, I couldn’t find evidence that there was any harm in following them, and it seemed safest to keep them in mind while developing the theme. I chose a dark theme with blue as the primary color and used the other colors that tested well in supportive and contrasting roles throughout the theme.

Other Theme Inspiration

There were a few palettes I looked at for inspiration. For example, I did an exploratory study into what kind of tone I wanted.

I also looked at the work of Maggie Appleton quite a bit. I especially like her work on Egghead.io, which is amazing on every level.

Those greens and oranges are where I started with my palette. I made adjustments while working on accessibility. The blackest blue-black that’s in the lower right of the image became the base of my main background.

There were a lot of decisions to make at this point. Thankfully, my research was done. Remember, I wanted pastels, like the ones used in the Material Palenight, Panda and Dracula Dark themes. Specifically, I wanted to use beige, goldenrod, green, pink and blue based on what I had read in the research phase. But the most important part to me was contrast across the color spectrum. That’s what I felt some of the other themes lacked, even if they nailed the colors.

I went to work, creating blue and a golden color as the base standard for working across the color spectrum.

I wanted to call out state/data strongly because it tends to be important for me when when scanning code. I started with red because I had seen that in many other themes, but I couldn’t get away from the fact that my eyes would only go there and the fact that red is often associated with error states. So, instead, I used the strongest color against the background I had chosen, white, and italicized it to offset it even more. It also has the benefit of being a midpoint between blue and gold. I saved the red/orange distinction for React components, which needed to have some separation from the standard HTML elements.

Contrast is a zero-sum game: if everything is important, nothing is. I tried my best to be sure things that were conceptually similar or could fall back, did so that strong contrast was intentional and everything didn’t turn into a rainbow, because that hurts your ability to scan the document.

One such decision was to keep the sidebar contrast low in order to keep the focus on the editor. I found that if I tried to bring the contrast up in other parts of my editor, my eyes actually began to hurt. This can be a challenging thing about some accessibility- because not all humans are the same, things like color and font can become a spectrum rather than a hard rule.

After running a lot of tests, the compromise I decided on was to keep the theme to what I myself could use without strain, and update the readme with the preferences I would recommend for someone who was different from me and needed the contrast levels to be higher. If you go into your user settings in VS Code (Code > Preferences > Settings), in the righthand pane, you can add your own customizations. With the help of some people in the community who filed issues because they wanted this feature, we arrived at these possible color preference updates for those who need the contrast:

You can actually drop any colors in here, this was just a suggestion for a starting point based on the existing theme colors. These workbench color customizations are really handy, they allow people to use a theme, and then make small tweaks as they feel they need them. If you’re using a theme and it’s allllmost perfect but not quite, you can always make small changes this way.

There were hundreds of other small decisions I made over the course of creating it (and am still making now that I’m maintaining it), but after I had made a good amount of tweaks, I would check my work against the colorblind simulator. It wasn’t terribly easy getting it to work right in every language for every setting, but I did my best. This is where that demo folder came in really handy. Now that it’s launched, if someone needs particular language support, I can encourage them to PR the folder so that I can support it.

Here’s an example Angular file:

…and here are some of the tests I ran to determine if there was enough contrast. Remember, what I was looking for was contrast across the color spectrum for meaningful distinctions, and slight contrast for things that require less attention:

It took a good amount of tests to get something that didn’t become monochrome, especially across languages. The amount of color combinations possible are a bit endless, and it’s pretty difficult to make something that works perfectly in every scenario. That’s why I spent a lot of time crafting the demo folder and making small tweaks to try to cover as much ground as possible.

I launched it! Everyone party! 🎉

The most helpful thing to me were the contributions of people using the theme and letting me know their pain points by logging issues in the GitHub repo. It’s hard to see every failure scenario across a theme, and have so far had 16 subsequent releases to fix over 50 bugs so far, some with help from the community. The more people who let me know what they’re seeing, the better the theme gets. Not everything gets in of course — there are times when people want things that conflict with other requests, so I have to make a judgement call in some cases. Still, this this is rare and the majority of feedback so far have been very clean-cut and actionable.

That’s it! If you’d like to check out the theme, it’s available here for free. I hope you found this useful, either for background into the theme and the decisions that were made, or for a process in creating your own.

vscodethemes/web

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Search and preview themes from the Visual Studio Marketplace.

This repository contains the source code for vscodethemes.com, built with Remix and Cloudflare Workers.

VS Code Themes scans the Visual Studio Marketplace and maintains a searchable database of themes.

In order for a theme to show up on the website:

You can search for themes matching a color using the query string:

For a full list of supported color formats check out the test suite.

Creating a Theme

Here are some helpful links if you’d like to create your own theme:

Development requires access to private packages. If you’re interested in contributing let’s chat! You’re welcome to open an issue or send an email to hello@jschr.io.

Helping you discover new themes since 2018:

About

Search and preview themes from the VS Code Marketplace.

How to: Change fonts, colors, and themes in Visual Studio

Change the color theme

Here’s how to change the color theme of the IDE frame and the tool windows in Visual Studio.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.

You can also choose to use the theme that Windows uses by selecting Use system setting.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

You can create and edit your own Visual Studio themes by using an extension. Choose from either of the following two options, depending on the version of Visual Studio you’re using:

Change fonts and text size

You can change the font and text size for all the IDE frame and tool windows, or for only certain windows or text elements. You can also change the font and text size in the editor, too.

To change the font and text size in the IDE

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

To change the font and text size in the editor

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

Set language-specific editor options

Set accessibility options

In a neurodiverse world, we want to support our different learners and low-vision users by offering the following font options and color themes:

Use the Cascadia Code font

The following screenshot shows an example of the default Cascadia Mono font and lists a series of characters, to include mathematical symbols, that you might find yourself using while you code.

The following screenshot shows an example of the Cascadia Code font, where the same series of characters shown previously are now converted to coding ligatures, or glyphs.

Notice that the last line of text in the Cascadia Code screenshot shows how the space between duplicate characters is reduced, which also makes them easier to read.

Here’s how to toggle between the Cascadia fonts:

Go to Tools > Options > Environment > Fonts and colors.

From the Font dropdown list, select either the Cascadia Code font or the Cascadia Mono font you want, and then select OK.

There are color theme options for you if you experience low vision. You can use a high-contrast option for all the apps and UI on a computer, or an extra contrast option for Visual Studio only.

Use Windows high contrast

Use either of the following procedures to toggle the Windows high contrast option:

In Windows or in any Microsoft application, press the Left Alt+Left Shift+PrtScn keys.

In Windows, choose Start > Settings > Ease of Access. Then, under the Vision section in Windows 10 and later, choose High contrast.

The Windows high contrast setting affects all applications and UI on the computer.

Use Visual Studio extra contrast

Use the following procedures to toggle the Visual Studio extra contrast option:

On the menu bar in Visual Studio, choose Tools > Options, and then, in the options list, choose Environment > General.

In the Color theme drop-down list, choose the Blue (Extra Contrast) theme, and then choose OK.

More accessibility features in Visual Studio

You can also customize the default keyboard shortcuts available with Visual Studio. For more information, see the following pages:

Visual Studio also includes auto-completion for methods and parameters; for more information, see IntelliSense in Visual Studio.

Change the behavior of pop-up windows

Here’s how to turn off the pop-up windows:

From the Tools menu, choose Options.

Choose Text Editor > All Languages > General.

Clear the Auto list members and Parameter information checkboxes.

Change the settings of text-based tool windows

You can also change the settings for how text is displayed in the editor. Here’s how.

From the Tools menu, choose Options.

Choose Environment > Fonts and Colors.

Select an option on the Show settings for drop-down menu.

To change the font size for text in an editor, choose Text Editor.

To change the font size for text in text-based tool windows, choose [All Text Tool Windows].

To change the font size for ToolTip text in an editor, choose Editor Tooltip.

To change the font size for text in statement completion pop-ups, choose Statement Completion.

From Display items, select Plain Text.

In Font, select a new font type.

In Size, select a new font size.

To reset the text size for text-based tool windows and editors, choose Use Defaults.

Choose OK.

Change the colors for text, margin indicators, white space, and code elements

You can choose to change the default colors for text, margin indicators, white space, and code elements in the editor. Here’s how.

From the Tools menu, choose Options.

In the Environment folder, choose Fonts and Colors.

In Show settings for, choose Text Editor.

From Display items, select an item whose display you need to change, such as Plain Text, Indicator Margin, Visible White Space, HTML Attribute Name, or XML Attribute.

Select display settings from the following options: Item foreground, Item background, and Bold.

Choose OK.

Add text to toolbar buttons or modify the text

To improve toolbar usability and accessibility, you can add text to toolbar buttons.

To assign text to toolbar buttons

From the Tools menu, choose Customize.

In the Customize dialog box, select the Commands tab.

Select Toolbar, and then choose the toolbar name that contains the button you intend to display text for.

In the list, select the command you intend to change.

Choose Modify Selection.

Choose Image and Text.

To modify the displayed text in a button

Re-select Modify Selection.

Adjacent to In Name, insert provide a new caption for the selected button.

Accessibility support

How to edit default dark theme for Visual Studio Code?

I’m using Windows 7 64-bit.

But if after all there is a possibility to edit it, then which blocks of code are responsible for colour of member of object, member of pointer and name of class and structure in the C++ language?

15 Answers 15

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In VS code ‘User Settings’, you can edit visible colours using the following tags (this is a sample and there are much more tags):

If you want to edit some C++ color tokens, use the following tag:

The file you are looking for is at,

Microsoft VS Code\resources\app\extensions\theme-defaults\themes

on Windows and search for filename dark_vs.json to locate it on any other system.

Update:

With new versions of VSCode you don’t need to hunt for the settings file to customize the theme. Now you can customize your color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings. Documentation on the matter can be found here.

As far as the themes, VS Code is every bit as editable as Sublime. You can edit any of the default themes that come with VS code. You just have to know where to find the theme files.

Side note: I love the Monokai theme. However, all I wanted to change about it was the background. I don’t like the dark grayish background. Instead, I think the contrast is WAY better with a solid black background. The code pops out much more.

Anyways, I hunted for the theme file and found it (in windows) at:

c:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-monokai\themes\

In that folder I found the Monokai.tmTheme file and modified the first background key as follows:

There are a few ‘background’ key in the theme file, make sure you edit the correct one. The one I edited was at the very top. Line 12 I think.

The simplest way is to edit the user settings and customise workbench.colorCustomizations

If you want to make your theme

There is also the option modify the current theme which will copy the current theme settings and let you save it as a *.color-theme.json JSON5 file

You cannot «edit» a default theme, they are «locked in»

However, you can copy it into your own custom theme, with the exact modifications you’d like.

If all you want to change is the colors for C++ code, you should look at overwriting the c++ support colorizer. For info about that, go here: https://code.visualstudio.com/docs/customization/colorizer

EDIT2: To clarify:

As others have stated, you’ll need to override the editor.tokenColorCustomizations or the workbench.colorCustomizations setting in the settings.json file. Here you can choose a base theme, like Abyss, and only override the things you want to change. You can either override very few things like the function, string colors etc. very easily.

E.g. for workbench.colorCustomizations

E.g. for editor.tokenColorCustomizations :

However, deep customisations like change the colour of the var keyword will require you to provide the override values under the textMateRules key.

You can also override globally across themes:

Any color theme can be changed in this settings section on VS Code version 1.12 or higher:

tldr

You can get the colors for any theme (including the builtin ones) by switching to the theme then choosing Developer > Generate Color Theme From Current Settings from the command palette.

Details

Switch to the builtin theme you wish to modify by selecting Preferences: Color Theme from the command palette then choosing the theme.

From the command palette choose Preferences: Open Settings (JSON) to open your settings.json file. Then add your desired changes to either the workbench.colorCustomizations or tokenColorCustomizations section.

For example, the following customizes the theme listed as Dark+ (default dark) from the Color Theme list. It sets the editor background to near black and the syntax highlighting for comments to a dim gray.

doki-theme/doki-theme-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Cute themes based on cute anime characters. With over 60 themes, the one you like the best is probably here.

You can choose themes based on characters from these various Anime, Manga, or Visual Novels:

Background Wallpaper is probably one of the best features of the plugin. This feature will set the background image to the current theme’s official wallpaper.

Important!! Installing theme assets requires me to corrupt VS-Code by modifying CSS. You will have to use the «Remove Sticker/Background» command to restore VS Code back to supported status before unistalling. You can close VSCode and start it back up remove the annoying Unsupported warning. The plugin automatically fixes VSCode’s checksums.

Glass Pane effect

For convenience, the wallpaper & background image are both installed when you run the Install Wallpaper command. If you want the background image on and the wallpaper off, then you can adjust it using the settings listed below.

You’ll have to put these changes in the settings.json in your VSCode.

You can also use the settings UI just search for Doki and you should find the relevant settings.

Tired of the the VSCode watermark cramping your style? You have the ability to hide it using Hide VSCode Watermark, so you can fully enjoy your art.

Important!! Hiding the watermark requires me to corrupt VS-Code by modifying CSS. You will have to use the «Remove Sticker/Background» command to restore VS Code back to supported status before unistalling. You can close VSCode and start it back up remove the annoying Unsupported warning. The plugin automatically fixes VSCode’s checksums.

Show sticker allows you to control the presence of the cute sticker in the bottom right-hand corner of your IDE.

Hey alright, you have the ability to set the image to be used for all the doki-themes. Allowed image types: jpg, png, gif. You’ll have to put these changes in the settings.json in your VSCode.

You can also use the settings UI just search for Doki and you should find the relevant settings.

Note: All path values must be an absolute path that resolves to a file on the machine running VSCode. Assets will not be installed until the configuration references a file on your system.

Custom Sticker

Custom Sticker Positioning

Custom Background

This is the empty editor screen (all tabs closed), the one with the VS Code watermark.

Custom Wallpaper

This shows up on your editor and other places. Note: you’ll want to make your image partially transparent. Cus I was too lazy to play make all the backgrounds partially transparent to show the opaque background image. Didn’t feel like peeling that onion and deviating from my color schemes.

This is what happens when you don’t make your custom wallpaper transparent.

You cannot see anything!

Custom Wallpaper/Background Anchor

Value to be used for css ‘background-position’ for both the background & wallpaper (eg: center, right, left, etc.)

Custom Status Bar Name

I can’t get every theme build, so I suppose you want to customize and make your own. I get that, so you have the ability to change the name that shows up next to the heart in the status bar.

Unfortunately, every time VSCode updates, you will lose your installed asset changes. Thankfully, this plugin will remember what assets you installed, and attempt to restore them on the first detection of a VSCode update.

If the restoration does not work the first time, you can fix the issue then run the Restore Assets command to quickly get you back to coding!

So I thought it was a good idea to add a bit of culture to this plugin. Ya boi is horny on main.

I will give you a bit of a warning before you install suggestive content. Some of us are professional Otaku, who want to remain, well. professional. Don’t worry if you choose to continue, I won’t ask you again for that specific theme.

Applies for the following content:

Removes both the sticker and wallpaper from your vscode and restores the original supported status.

Did you know I keep a changelog? You can find it here!

I’ve also supplied a Show Changelog action that will bring up the changes in your VSCode!

If you want to get your workstation set up to work on the plugin, then you’ll want to check out the CONTRIBUTING.md for instructions on what is needed.

If you want your main squeeze to be featured in the Doki Theme suite, feel free to submit a theme request.

Enjoying the plugin?

Great! I am glad you like it!

Be sure to ⭐ and share it with other weebs!

Also, giving it a good review on the extension marketplace will help this plugin become visible to more otaku!

I think your voice needs to be heard! You probably have good ideas, so feel free to submit your feedback as an issue.

Theme Color

You can customize your active Visual Studio Code color theme with the workbench.colorCustomizations user setting.

Note: If you want to use an existing color theme, see Color Themes where you’ll learn how to set the active color theme through the Preferences: Color Theme dropdown ( ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T ) ).

Theme colors are available as CSS variables in webviews, and an extension is available which provides IntelliSense for them.

Color formats

Some colors should not be opaque in order to not cover other annotations. Check the color descriptions to see to which colors this applies.

Contrast colors

The contrast colors are typically only set for high contrast themes. If set, they add an additional border around items across the UI to increase the contrast.

Base colors

Window border

The theme colors for VS Code window border.

Text colors

Colors inside a text document, such as the welcome page.

Action colors

A set of colors to control the interactions with actions across the workbench.

Button control

A set of colors for button widgets such as Open Folder button in the Explorer of a new window.

Dropdown control

A set of colors for all Dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the Dropdown control is not used on macOS currently.

Input control

Colors for input controls such as in the Search view or the Find/Replace dialog.

Scrollbar control

Badge

Badges are small information labels, for example, search results count.

Progress bar

Lists and trees

Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.

Activity Bar

The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.

Side Bar

The Side Bar contains views like the Explorer and Search.

sideBar.background : Side Bar background color.

sideBar.foreground : Side Bar foreground color. The Side Bar is the container for views like Explorer and Search.

sideBar.border : Side Bar border color on the side separating the editor.

sideBar.dropBackground : Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through.

sideBarTitle.foreground : Side Bar title foreground color.

sideBarSectionHeader.background : Side Bar section header background color.

sideBarSectionHeader.foreground : Side Bar section header foreground color.

sideBarSectionHeader.border : Side bar section header border color.

Minimap

The Minimap shows a minified version of the current file.

minimap.findMatchHighlight : Highlight color for matches from search within files.

minimap.selectionHighlight : Highlight color for the editor selection.

minimap.errorHighlight : Highlight color for errors within the editor.

minimap.warningHighlight : Highlight color for warnings within the editor.

minimap.background : Minimap background color.

minimap.selectionOccurrenceHighlight : Minimap marker color for repeating editor selections.

minimap.foregroundOpacity : Opacity of foreground elements rendered in the minimap. For example, «#000000c0» will render the elements with 75% opacity.

minimapSlider.background : Minimap slider background color.

minimapSlider.hoverBackground : Minimap slider background color when hovering.

minimapSlider.activeBackground : Minimap slider background color when clicked on.

minimapGutter.addedBackground : Minimap gutter color for added content.

minimapGutter.modifiedBackground : Minimap gutter color for modified content.

minimapGutter.deletedBackground : Minimap gutter color for deleted content.

Editor Groups & Tabs

Editor Groups are the containers of editors. There can be many editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.

editorGroup.border : Color to separate multiple editor groups from each other.

editorGroup.dropBackground : Background color when dragging editors around.

editorGroupHeader.noTabsBackground : Background color of the editor group title header when Tabs are disabled (set «workbench.editor.showTabs»: false ).

editorGroupHeader.tabsBackground : Background color of the Tabs container.

editorGroupHeader.tabsBorder : Border color below the editor tabs control when tabs are enabled.

editorGroupHeader.border : Border color between editor group header and editor (below breadcrumbs if enabled).

editorGroup.emptyBackground : Background color of an empty editor group.

editorGroup.focusedEmptyBorder : Border color of an empty editor group that is focused.

editorGroup.dropIntoPromptForeground : Foreground color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.

editorGroup.dropIntoPromptBackground : Background color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.

editorGroup.dropIntoPromptBorder : Border color of text shown over editors when dragging files. This text informs the user that they can hold shift to drop into the editor.

tab.activeBackground : Active Tab background color in an active group.

tab.unfocusedActiveBackground : Active Tab background color in an inactive editor group.

tab.activeForeground : Active Tab foreground color in an active group.

tab.border : Border to separate Tabs from each other.

tab.activeBorder : Bottom border for the active tab.

tab.unfocusedActiveBorder : Bottom border for the active tab in an inactive editor group.

tab.activeBorderTop : Top border for the active tab.

tab.unfocusedActiveBorderTop : Top border for the active tab in an inactive editor group

tab.lastPinnedBorder : Border on the right of the last pinned editor to separate from unpinned editors.

tab.inactiveBackground : Inactive Tab background color.

tab.unfocusedInactiveBackground : Inactive Tab background color in an unfocused group

tab.inactiveForeground : Inactive Tab foreground color in an active group.

tab.unfocusedActiveForeground : Active tab foreground color in an inactive editor group.

tab.unfocusedInactiveForeground : Inactive tab foreground color in an inactive editor group.

tab.hoverBackground : Tab background color when hovering

tab.unfocusedHoverBackground : Tab background color in an unfocused group when hovering

tab.hoverForeground : Tab foreground color when hovering

tab.unfocusedHoverForeground : Tab foreground color in an unfocused group when hovering

tab.hoverBorder : Border to highlight tabs when hovering

tab.unfocusedHoverBorder : Border to highlight tabs in an unfocused group when hovering

tab.activeModifiedBorder : Border on the top of modified (dirty) active tabs in an active group.

tab.inactiveModifiedBorder : Border on the top of modified (dirty) inactive tabs in an active group.

tab.unfocusedActiveModifiedBorder : Border on the top of modified (dirty) active tabs in an unfocused group.

tab.unfocusedInactiveModifiedBorder : Border on the top of modified (dirty) inactive tabs in an unfocused group.

editorPane.background : Background color of the editor pane visible on the left and right side of the centered editor layout.

sideBySideEditor.horizontalBorder : Color to separate two editors from each other when shown side by side in an editor group from top to bottom.

sideBySideEditor.verticalBorder : Color to separate two editors from each other when shown side by side in an editor group from left to right.

Editor colors

The most prominent editor colors are the token colors used for syntax highlighting and are based on the language grammar installed. These colors are defined by the Color Theme but can also be customized with the editor.tokenColorCustomizations setting. See Customizing a Color Theme for details on updating a Color Theme and the available token types.

All other editor colors are listed here:

Selection colors are visible when selecting one or more characters. In addition to the selection also all regions with the same content are highlighted.

Word highlight colors are visible when the cursor is inside a symbol or a word. Depending on the language support available for the file type, all matching references and declarations are highlighted and read and write accesses get different colors. If document symbol language support is not available, this falls back to word highlighting.

Find colors depend on the current find string in the Find/Replace dialog.

Search Editor colors highlight results in a Search Editor. This can be configured separately from other find matches in order to better differentiate between different classes of match in the same editor.

The hover highlight is shown behind the symbol for which a hover is shown.

The current line is typically shown as either background highlight or a border (not both).

The color for unicode highlights

The link color is visible when clicking on a link.

The range highlight is visible when selecting a search result.

The symbol highlight is visible when navigating to a symbol via a command such as Go to Definition.

To see the editor white spaces, enable Toggle Render Whitespace.

To see editor rulers, define their location with «editor.rulers»

editorRuler.foreground : Color of the editor rulers.

editor.linkedEditingBackground : Background color when the editor is in linked editing mode.

Bracket pair colorization:

Bracket pair guides:

editorBracketPairGuide.activeBackground1 : Background color of active bracket pair guides (1). Requires enabling bracket pair guides.

editorBracketPairGuide.activeBackground2 : Background color of active bracket pair guides (2). Requires enabling bracket pair guides.

editorBracketPairGuide.activeBackground3 : Background color of active bracket pair guides (3). Requires enabling bracket pair guides.

editorBracketPairGuide.activeBackground4 : Background color of active bracket pair guides (4). Requires enabling bracket pair guides.

editorBracketPairGuide.activeBackground5 : Background color of active bracket pair guides (5). Requires enabling bracket pair guides.

editorBracketPairGuide.activeBackground6 : Background color of active bracket pair guides (6). Requires enabling bracket pair guides.

editorBracketPairGuide.background1 : Background color of inactive bracket pair guides (1). Requires enabling bracket pair guides.

editorBracketPairGuide.background2 : Background color of inactive bracket pair guides (2). Requires enabling bracket pair guides.

editorBracketPairGuide.background3 : Background color of inactive bracket pair guides (3). Requires enabling bracket pair guides.

editorBracketPairGuide.background4 : Background color of inactive bracket pair guides (4). Requires enabling bracket pair guides.

editorBracketPairGuide.background5 : Background color of inactive bracket pair guides (5). Requires enabling bracket pair guides.

editorBracketPairGuide.background6 : Background color of inactive bracket pair guides (6). Requires enabling bracket pair guides.

This ruler is located beneath the scroll bar on the right edge of the editor and gives an overview of the decorations in the editor.

Errors and warnings:

Unused source code:

The gutter contains the glyph margins and the line numbers:

The editor comments widget can be seen when reviewing pull requests:

Diff editor colors

For coloring inserted and removed text, use either a background or a border color but not both.

Editor widget colors

The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover.

editorWidget.foreground : Foreground color of editor widgets, such as find/replace.

editorWidget.background : Background color of editor widgets, such as Find/Replace.

editorWidget.border : Border color of the editor widget unless the widget does not contain a border or defines its own border color.

editorWidget.resizeBorder : Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget.

editorSuggestWidget.background : Background color of the suggestion widget.

editorSuggestWidget.border : Border color of the suggestion widget.

editorSuggestWidget.foreground : Foreground color of the suggestion widget.

editorSuggestWidget.focusHighlightForeground : Color of the match highlights in the suggest widget when an item is focused.

editorSuggestWidget.highlightForeground : Color of the match highlights in the suggestion widget.

editorSuggestWidget.selectedBackground : Background color of the selected entry in the suggestion widget.

editorSuggestWidget.selectedForeground : Foreground color of the selected entry in the suggest widget.

editorSuggestWidget.selectedIconForeground : Icon foreground color of the selected entry in the suggest widget.

editorSuggestWidgetStatus.foreground : Foreground color of the suggest widget status.

editorHoverWidget.foreground : Foreground color of the editor hover.

editorHoverWidget.background : Background color of the editor hover.

editorHoverWidget.border : Border color of the editor hover.

editorHoverWidget.highlightForeground : Foreground color of the active item in the parameter hint.

editorHoverWidget.statusBarBackground : Background color of the editor hover status bar.

editorGhostText.border : Border color of the ghost text shown by inline completion providers and the suggest preview.

editorGhostText.background : Background color of the ghost text in the editor.

editorGhostText.foreground : Foreground color of the ghost text shown by inline completion providers and the suggest preview.

editorStickyScroll.background : Editor sticky scroll background color

editorStickyScrollHover.background : Editor sticky scroll on hover background color

The Debug Exception widget is a peek view that shows in the editor when debug stops at an exception.

The editor marker view shows when navigating to errors and warnings in the editor (Go to Next Error or Warning command).

Peek view colors

Peek views are used to show references and declarations as a view inside the editor.

Merge conflicts colors

Merge conflict decorations are shown when the editor contains special diff ranges.

Panel colors

Panels are shown below the editor area and contain views like Output and Integrated Terminal.

Status Bar colors

The Status Bar is shown in the bottom of the workbench.

Prominent items stand out from other Status Bar entries to indicate importance. One example is the Toggle Tab Key Moves Focus command change mode indicator.

Title Bar colors

Menu Bar colors

Command Center colors

Notification colors

Notification toasts slide up from the bottom-right of the workbench.

Once opened in the Notification Center, they are displayed in a list with a header:

Banner colors

The banner appears below the title bar and spans the entire width of the workbench when visible.

Extensions colors

Quick picker colors

Keybinding label colors

Keybinding labels are shown when there is a keybinding associated with a command. An example of the keybinding label can be seen in the Command Palette:

Usages of the keybinding label include (but are not limited to):

The following customizations are available:

Keyboard shortcut table colors

Integrated Terminal colors

Debug colors

Testing colors

Welcome page colors

welcomePage.background : Background color for the Welcome page.

welcomePage.progress.background : Foreground color for the Welcome page progress bars.

welcomePage.progress.foreground : Background color for the Welcome page progress bars.

welcomePage.tileBackground : Background color for the tiles on the Get Started page.

welcomePage.tileHoverBackground : Hover background color for the tiles on the Get Started.

welcomePage.tileShadow : Shadow color for the Welcome page walkthrough category buttons.

walkThrough.embeddedEditorBackground : Background color for the embedded editors on the Interactive Playground.

Source Control colors

Git colors

Settings Editor colors

Note: These colors are for the GUI settings editor which can be opened with the Preferences: Open Settings (UI) command.

Breadcrumbs colors

The theme colors for breadcrumbs navigation:

Snippets colors

The theme colors for snippets:

Symbol Icons colors

The theme colors for symbol icons that appears in the Outline view, breadcrumb navigation, and suggest widget:

How to: Change fonts, colors, and themes in Visual Studio

See the WeвЂ™ve upgraded the UI in Visual Studio 2022 blog post to learn more about the subtle color contrast ratio adjustments and a new Cascadia Code font we’ve added to make Visual Studio more accessible for everyone.

Change the color theme

Here’s how to change the color theme of the IDE frame and the tool windows in Visual Studio.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.

You can also choose to use the theme that Windows uses by selecting Use system setting.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > General.

In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

You can create and edit your own Visual Studio themes by using an extension. Choose from either of the following two options, depending on the version of Visual Studio you’re using:

Change fonts and text size

You can change the font and text size for all the IDE frame and tool windows, or for only certain windows or text elements. You can also change the font and text size in the editor, too.

To change the font and text size in the IDE

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In the Show settings for list, choose Environment.

If you want to change the font for tool windows only, in the Show settings for list, choose All Text Tool Windows.

Modify the Font and Size options to change the font and text size for the IDE.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

To change the font and text size in the editor

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

On the menu bar, choose Tools > Options.

In the options list, choose Environment > Fonts and Colors.

In Show settings for list, select Text Editor.

Modify the Font and Size options to change the font and text size for the editor.

Select the appropriate item in Display items, and then modify the Item foreground and Item background options.

Set language-specific editor options

Set accessibility options

In a neurodiverse world, we want to support our different learners and low-vision users by offering the following font options and color themes:

Use the Cascadia Code font

The following screenshot shows an example of the default Cascadia Mono font and lists a series of characters, to include mathematical symbols, that you might find yourself using while you code.

The following screenshot shows an example of the Cascadia Code font, where the same series of characters shown previously are now converted to coding ligatures, or glyphs.

Notice that the last line of text in the Cascadia Code screenshot shows how the space between duplicate characters is reduced, which also makes them easier to read.

Here’s how to toggle between the Cascadia fonts:

Go to Tools > Options > Environment > Fonts and colors.

From the Font dropdown list, select either the Cascadia Code font or the Cascadia Mono font you want, and then select OK.

There are color theme options for you if you experience low vision. You can use a high-contrast option for all the apps and UI on a computer, or an extra contrast option for Visual Studio only.

Use Windows high contrast

Use either of the following procedures to toggle the Windows high contrast option:

In Windows or in any Microsoft application, press the Left Alt+Left Shift+PrtScn keys.

In Windows, choose Start > Settings > Ease of Access. Then, under the Vision section in Windows 10 and later, choose High contrast.

The Windows high contrast setting affects all applications and UI on the computer.

Use Visual Studio extra contrast

Use the following procedures to toggle the Visual Studio extra contrast option:

On the menu bar in Visual Studio, choose Tools > Options, and then, in the options list, choose Environment > General.

In the Color theme drop-down list, choose the Blue (Extra Contrast) theme, and then choose OK.

More accessibility features in Visual Studio

You can also customize the default keyboard shortcuts available with Visual Studio. For more information, see the following pages:

Visual Studio also includes auto-completion for methods and parameters; for more information, see IntelliSense in Visual Studio.

Change the behavior of pop-up windows

Here’s how to turn off the pop-up windows:

From the Tools menu, choose Options.

Choose Text Editor > All Languages > General.

Clear the Auto list members and Parameter information checkboxes.

Change the settings of text-based tool windows

You can also change the settings for how text is displayed in the editor. Here’s how.

From the Tools menu, choose Options.

Choose Environment > Fonts and Colors.

Select an option on the Show settings for drop-down menu.

To change the font size for text in an editor, choose Text Editor.

To change the font size for text in text-based tool windows, choose [All Text Tool Windows].

To change the font size for ToolTip text in an editor, choose Editor Tooltip.

To change the font size for text in statement completion pop-ups, choose Statement Completion.

From Display items, select Plain Text.

In Font, select a new font type.

In Size, select a new font size.

To reset the text size for text-based tool windows and editors, choose Use Defaults.

Choose OK.

Change the colors for text, margin indicators, white space, and code elements

You can choose to change the default colors for text, margin indicators, white space, and code elements in the editor. Here’s how.

From the Tools menu, choose Options.

In the Environment folder, choose Fonts and Colors.

In Show settings for, choose Text Editor.

From Display items, select an item whose display you need to change, such as Plain Text, Indicator Margin, Visible White Space, HTML Attribute Name, or XML Attribute.

Select display settings from the following options: Item foreground, Item background, and Bold.

Choose OK.

Add text to toolbar buttons or modify the text

To improve toolbar usability and accessibility, you can add text to toolbar buttons.

To assign text to toolbar buttons

From the Tools menu, choose Customize.

In the Customize dialog box, select the Commands tab.

Select Toolbar, and then choose the toolbar name that contains the button you intend to display text for.

In the list, select the command you intend to change.

Choose Modify Selection.

Choose Image and Text.

To modify the displayed text in a button

Re-select Modify Selection.

Adjacent to In Name, insert provide a new caption for the selected button.

Accessibility support

How to: Personalize the Visual Studio IDE and the editor

In this how-to article, we’ll customize the Visual Studio color theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Dark. Here’s how to change it to a different color theme.

On the menu bar, select Tools > Options.

In the options list, select Environment > General.

When you change a color theme, text in the IDE reverts to the default or previously customized fonts and sizes for that theme.

In this how-to article, we’ll customize the Visual Studio color theme from the blue theme to the dark theme. Then, we’ll customize the colors for two different types of text in the code editor.

If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Set the color theme for the IDE

The default color theme for Visual Studio’s user interface is Blue. Let’s change it to Dark.

On the menu bar, which is the row of menus such as File and Edit, choose Tools > Options.

On the Environment > General options page, change the Color theme selection to Dark, and then choose OK.

The color theme for the entire Visual Studio development environment (IDE) changes to Dark.

You can create your own themes by installing the Visual Studio Color Theme Designer from the Visual Studio Marketplace.

Change text colors in the editor

Now we’ll customize some text colors for the editor. First, let’s create a new XML file to see the default colors.

From the menu bar, choose File > New > File.

In the New File dialog box, under the General category, choose XML File, and then choose Open.

Notice that the line numbers are a turquoise-blue color, and the XML attributes (such as id=»bk101″ ) are a light blue color. We’re going to change the text color for these items.

To open the Options dialog box, choose Tools > Options from the menu bar.

Under Environment, choose the Fonts and Colors category.

To change the color of the line numbers text, in the Display items list, choose Line Number. In the Item foreground box, choose Olive.

Looking for info on how to download VS Code color themes and then import them into Visual Studio? Check out the Introducing a Collection of New Visual Studio Themes blog post for all the details.

Building a Visual Studio Code Theme with Style Dictionary

Screenshot of Nu Disco Visual Studio Code theme

Introduction

In this article I will show you how to build a Visual Studio Code color theme extension using Style Dictionary. Throughout the process I will try to explain concepts about VSCode theme development so you can apply them when you are creating a theme even if you donвЂ™t use Style Dictionary.

Style Dictionary is a framework written in Node for creating and managing design tokens. Disclaimer: I am a maintainer on Style Dictionary. If you would like to know more about design tokens, here are some resources and here is a good introductory article.

A VSCode theme file is a JSON file that defines colors and styles in a way that resembles design tokens: name-value pairs. Style Dictionary is a great tool for creating VSCode color themes for a few reasons:

Here is the code for the theme we are going to build if you want to skip the article and dive in. It is a Github template so that you can start a new repository based on it. I tried to document and explain everything to make it easy to follow and customize. Feel free to take it and modify it to create your own theme. If you do show it to me! Or if you want to install the theme I created, search for вЂNu DiscoвЂ™ in VSCode extensions.

Extension Structure

What we are really building is a VSCode extension that contributes one or more themes. A VSCode extension is very similar to an npm module. It uses a package.json file to describe the extension, and then points to other files in the package. For a color theme, that will be another JSON file.

package.json

The package.json is similar to one for an npm package, but has some different attributes.

You define the themes your extension contributes in the package.json like this:

Theme file

A VSCode theme is a JSON file that define colors and styles. The filename should match the path in the package.json file. It has this structure:

Style Dictionary Setup

The VSCode theme file looks a lot like design tokens to me! We will use Style Dictionary to define design tokens that will be used to output VSCode theme JSON files. To get started, you can use my Github repository as a template to start your theme:

Here is the structure of the package:

You can run npm run build or npm run watch it will run the build.js file which uses Style Dictionary to create the VSCode theme files. Those files will be created in the build/ directory. Here is a quick overview of what happens when you run the build script:

We will go into the build process more later. For now letвЂ™s talk about application and syntax styles in a VSCode theme.

Application styles

These are the theme styles of the editor outside of syntax highlighting colors, but does include some styles of the text editor itself like highlighting backgrounds, borders, and backgrounds. This is everything like the side bar, file tree, tabs, action bar, popups, etc. Here is the full API reference for application theme colors. It helps me to think of these as the application colors, even though they are defined in a colors attribute in a VSCode theme file. The colors attribute is a flat object with dot notation separated keys. For example if you wanted to change the background of the activity bar, which is on the far left or right of VSCode, you would add this to the colors object:

This brings me to the second reason why Style Dictionary is helpful: aliases. You can define common colors that are used throughout the theme, like color.background.tertiary and reference them in the application and syntax styles.

One thing you might notice is that each color definition is not a string, but rather an object with a value attribute. This is how Style Dictionary knows what parts of the object are design tokens. When Style Dictionary runs, it performs transforms on the tokens like creating a name based on the object path and resolving any references to other token values. In this case, the generated output from that file would look something like this:

The most difficult thing for me was trying to figure out what all the color names meant. Unfortunately the VSCode docs for this werenвЂ™t always super helpful. To help with this there are comments throughout the JSON5 files with descriptions of what things mean and how to trigger them. Some things

Editor highlighting and selecting

One of the more interesting, and confusing, things I found creating a VSCode theme was all of the different editor highlight and selection states. When the cursor is within certain keywords, the editor might highlight the word itself and other words as well for a variety of reasons. There can also be multiple layers of highlighting taking place on the same word as well. Then there is text selection, with inactive and active states. This is all very powerful, but at times confusing. Take a look at this example, notice the different background colors of highlighted text:

Syntax styles

LetвЂ™s say you have this simple Javascript file:

That HTML and CSS would produce this highlighted syntax:

var В name В = В ‘ Danny ‘ ;

The only thing that is not the same as HTML and CSS is that scopes are nested. For example there is no js or quoted scopes, even though in this example you could write CSS to target the js or quoted classes.

Normally when building a VSCode theme to create these syntax highlighting styles you would put objects in the tokenColors array in the theme JSON like this:

This allows you to group scopes together under one style declaration. This would be like targeting multiple selectors in CSS:

I found it easier to create the object structure of the scopes to visualize how they are nested. For example this is my comment scope object:

That design token file will generate these tokenColors objects in the VSCode theme JSON:

Here is an overview of the scope namespaces:

Here are some more references if you are curious about how scopes and syntaxes work:

Building

LetвЂ™s take a look at how to build the theme files with Style Dictionary. All this code is already in the build.js file, but letвЂ™s walk through what it is doing.

The first thing we need to do is to add a custom name transform. This will create the name for each design token in the way VSCode expects, which is a dot notation object path.

Next we add a custom format. This will take all the design tokens and map them to the appropriate places in the VSCode theme JSON. A format in Style Dictionary takes the merged design token object, with tokens transformed, and the platform configuration and returns a string which will be written to a file. Internally Style Dictionary creates a flat array of all the design tokens, dictionary.allProperties that you can use when outputting files with flat arrays of values.

Finally we build a Style Dictionary for each theme. This allows us to swap out light/dark tokens and build separate themes. IвЂ™ll go into that a bit more in the next section.

Themes

In order to create multiple VSCode themes without duplicating all the application and syntax tokens we can dynamically create 2 Style Dictionary instances in our build script. This is inspired from the multi-brand multi-platform example in Style Dictionary. The design tokens defined in application and syntax reference ones in the theme type and core which allows you to define application and syntax tokens once rather than for each theme.

We do this by dynamically changing the source of the Style Dictionary to include either the light or dark tokens:

LetвЂ™s take a look at how this will work on the token side. Looking back to the activityBar colors earlier:

tokens/dark/background.json5

The theme tokens reference the core color palette defined in tokens/core.json5:

This allows you to not have to duplicate all the application and syntax tokens for each theme.

Testing

Now that you have a our package set up, you will need to test it out.

Triggering styles

The hardest thing in my mind when creating a VSCode theme is figuring out how to trigger certain elements and states to see those styles get applied. For example, there are input validation styles and I had to figure out how to trigger a warning validation. You can do it by writing a commit message over 50 characters on the first line in the source control panel.

There are comments in the source code to help explain what things are and how to trigger them. Even if you donвЂ™t use my code, those parts might be helpful to take a look at.

Using the debugger

Pressing F5 will start debugging and open a new window with the extension running.

Testing locally

To really get a feel for how your theme looks, you can install it locally and use it when you work on other projects for a while. All of your installed extensions stored are in this directory:

After you do that, you can set the color theme with cmd + K T and you should see your themes in the list. Then to see changes in your current VS Code window open the quick command panel with cmd+shift+P. Then search for Developer: Reload Window.

Testing terminal colors

Publishing

I wonвЂ™t go into publishing too much, but I you can read more about publishing here: https://code.visualstudio.com/api/working-with-extensions/publishing-extension

One thing that the article does not say is when you are creating the personal access token, make sure to select вЂњAll accessible organizationsвЂќ in the organization dropdown.

I started this project after reading this CSS Tricks article and looking at Sarah DrasnerвЂ™s Night Owl theme. Huge thanks to them! If you build a theme based on my Style Dictionary setup, I would love to see it! Send me a tweet with your theme.

material-theme/vsc-material-theme

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Brought to you by

Table of contents

The most epic theme meets Visual Studio Code. You can help by reporting issues here.

You can install this awesome theme through the Visual Studio Code Marketplace.

Launch Quick Open:

Paste the following command and press Enter :

And pick the one by Mattia Astorino (Equinusocio) as author.

Launch Quick Open:

Set the accent color

Launch Quick Open:

Override theme colors

Color Scheme override

Basic example

Advanced example

Recommended settings for a better experience

Thanks to the Material Theme community you can use it with other software, here are the official portings:

This project exists thanks to all the people who contribute. [Contribute].

Thank you to all our backers! 🙏 [Become a backer]

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

About

Material Theme, the most epic theme for Visual Studio Code

microsoft/theme-converter-for-vs

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Theme Converter for Visual Studio

Theme Converter is a CLI tool which allows you to convert your VS Code theme to work in Visual Studio. It’s a simple tool that maps the colors of a theme to Visual Studio. Themes can be packaged into VSIXs and uploaded to the Marketplace so that more people can use your theme! This allows developers who use Visual Studio, or use both VS Code and Visual Studio, to quickly get access to a wide range of fun and interesting themes!

Here’s a quick overview on how the Theme Converter works:

Our community of authors have already converted a handful of VS Code themes to work in Visual Studio. Feel free to take a look here.

If you want to convert a theme and patch it to a target VS:

If you just want to convert a theme and get the generated pkgdef:

Getting a theme’s json file

Creating a VSIX for the new theme

This section describes how you can create a VSIX with the converted theme for publishing and sharing.

Removing a converted theme from VS

How to file issues and get help

This project uses GitHub Issues to track bugs and feature requests. Please search the existing issues before filing new issues to avoid duplicates. For new issues, file your bug or feature request as a new Issue.

Microsoft Support Policy

Support for this project is limited to the resources listed above.

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

About

CLI tool that allows you to convert your VS Code color theme to a VS 2022 color theme.

5 Best VS Code Themes

What makes VS Code stand out from other source code editors? There is no simple answer to that question, as it is a combination of factors. However, it’s safe to say that the sheer number of themes available for VS Code is one of them. Themes allow you to choose a color palette that minimizes your eye strain and makes it easier to detect errors in the code.

With that in mind, this article will explore the 5 best VS Code themes that will allow you to maximize your productivity and enjoy a more pleasurable visual experience.

Criteria Used to Choose the Themes

When it comes to style and color preferences, it’s almost impossible to be completely objective. Some developers love dark themes, while others are more productive with light themes. That said, how does one choose the top 5 VS Code themes?

The following criteria were used to select the themes that make up this list:

Installing a VS Code Theme

Installing a theme is quite simple. VS Code comes with over a dozen themes by default, including a variety of light, dark, and high-contrast themes. Additionally, you can also choose from countless themes available in the VS Code Marketplace, and if none meet your needs, you can even create a theme of your own.

To select an already installed theme, you must open the Color Theme picker:

Once selected, the theme will be applied immediately.

If you want to add new themes to the list of available options, the easiest way is to search for one in the Marketplace. For this, you can either choose the last option from the list of installed themes, Install Additional Color Themes, or you can click the Extensions button. In the latter case, be sure to type in the search bar “category:themes”.

By selecting any of the available themes, you will see a preview of the style and colors used. To install any theme, just click the Install button, and it will be added to your list of available themes.

If none of the Marketplace themes are to your liking, you can create your own, either from an existing theme or from scratch. The themes documentation describes the procedure in detail. Alternatively, you can use an online theme generator like Theme Studio for VS Code to help you create a visual theme.

5 Best VS Code Themes

Based on the criteria detailed above, here are the five best VS Codes themes:

Read on to learn more about each!

One Dark Pro

PROS:

CONS:

One Dark Pro is the most downloaded theme in the marketplace, and it’s no wonder—this theme is none other than the VS Code version of Atom’s iconic One Dark theme. The combination of a vivid color palette and a background with the ideal level of darkness makes One Dark Pro one of the best alternatives for lovers of modern themes. For an even cleaner experience, the developers include the One Dark Pro Flat, which changes the workspace colors slightly.

VS Code theme variations included: One Dark Pro, One Dark Pro Flat.

One Dark Pro Flat

Monokai Pro

PROS:

CONS:

Although the extended use of Monokai Pro requires the purchase of a license worth €9.95, it is well worth it. This theme stands out for its attention to detail in color selection, matching icons, and filters (child themes) that enhance its functionality. The included variations (octagon, ristretto, spectrum, and machine) allow this theme to easily adjust to any monitor, regardless of brightness or contrast settings. This can be especially useful in multi-monitor setups with different aspect ratios since you can quickly change the “filter” to match different brands’ color temperature settings when moving the VS Code window around. All in all, if you prefer dark themes, Monokai Pro is one of the best options available.

VS Code theme variations included: Monokai Pro, Monokai Pro Octagon, Monokai Pro Ristretto, Monokai Pro Spectrum, Monokai Pro Machine. Monokai Pro Octagon

Monokai Pro Ristretto

Monokai Pro Spectrum Monokai Pro Machine

Cobalt2

PROS:

CONS:

From an accessibility point of view, themes based on the legendary Cobalt are hard to beat. The combination of a matte blue background with a rich palette of contrasting colors in Cobalt2 makes it easy to work for hours without eye strain. Moreover, an advantage of this theme is maintaining a consistent experience across applications, as it is available for iTerm2, Alfred, Slack, and more.

VS Code theme variations included: Cobalt2

Noctis

PROS:

CONS:

If you are undecided between choosing dark or light themes, Noctis may be just what you are looking for. After installing Noctis, you will have 11 variations to choose from, including dark themes with different shades, several light themes, and even intermediate themes. This versatility gives you the ability to try different palettes until you find one (or more) that suits your taste and mood. Additionally, if you have little experience using VS Code, Noctis can be a good starting point to explore the type of theme you like best.

VS Code theme variations included: Noctis, Noctis Lux, Noctis Hibernus, Noctis Lilac, Noctis Azureus, Noctis Bordo, Noctis Obscuro, Noctis Sereno, Noctis Uva, Noctis Viola, Noctis Minimus.

Night Owl

PROS:

CONS:

If all you need is a dark and light theme, then Night Owl might interest you. Each variation is intended to help you reduce eye fatigue, although, unlike the other themes on this list, the choice of colors can be extreme for some. The Night Owl theme uses a deep dark background and colors that make the code stand out, while Light Owl uses a combination of a white background with bold colors. This theme is intended to be used at intervals depending on the time of day, which fits perfectly with the style of many developers who want to avoid the monotony of a single theme throughout the day.

VS Code theme variations included: Night Owl, Light Owl.

Night Owl Light

Conclusion

This blog post discussed the elements that make a VS Code theme stand out from the rest: a color palette that does not produce eye strain, but also allows you to spot syntax errors easily, a robust community that supports the theme, and the ability to adapt the theme to your needs.

Depending on your preferences and visual acuity, the ideal theme for working at night or in low light conditions could be a dark theme such as One Dark Pro, Monokai Pro, or Night Owl. On the other hand, if you work in a brightly lit area, light themes such as Noctis Lux, Light Owl, or even Cobalt2 might be a better alternative.

Everyone is different and has different needs depending on visual and technical preferences, so it is handy to have different themes that suit your preferences ready to use when required. Next time you need a new theme, be sure to give one of these a try.

Источники: