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. 

Download One Dark pro

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.

Download Dracula Official

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.

Download Darcula theme

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.

Download Synthwave ’84

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.

Download Atom One Dark 

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.

Download Night Owl

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.

Download Quiet Light

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.

Download Bracket Lights Pro

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.

Download Bluloco Light

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

Tokyo Night Storm
Tokyo Night Storm

Tokyo Day
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.

Download Tokyo Night

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.   

Download GitHub

Winter is Coming

Dark Blue HTML

Dark Blue JavaScript

Dark Blue TypeScript

Light JavaScript
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.

Download Winter is Coming

Firefox Theme

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.

Download Firefox theme

Sublime Material Theme

Dark
Dark

Light
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. 

Download Sublime Material Theme

Nu Disco

Nu Disco
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.

Download Nu Disco theme

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.

About the author

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