Home / Blog /
Top VS Code themes
//

Top VS Code themes

//
Tabnine Team /
8 minutes /
November 22, 2021

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

According to the 2019 Developers Survey, Visual Studio Code (VS Code) 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 Stack Overflow.

VS Code features a lightning-fast source code editor that’s ideal for everyday use. With support for hundreds of different programming languages, including C++, Java, JSON, and 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’re looking for the top VS Code themes to try out, here’s a variety of stylish themes to choose from, from vibrant and sleek to pizzazz.

You can increase productivity using an AI-powered coding assistant like Tabnine, which offers code snippets based on your coding style. Using Tabnine, you can write code quickly and avoid typos, making the coding process more efficient. Learn more about using AI for software development and try Tabnine Pro free for 90 days!

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 search in the VS Code IDE.

Method 1: Marketplace

Step 1: Visit the Marketplace and select the theme you want to download. In VS Code, select File > Preferences > Color Theme to open the Color Theme picker on your Windows PC. If you’re on macOS, select Code > Preferences > Color Theme.

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

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

Step 3: Select the theme you want and press Enter. 

Method 2: Search in the VS Code IDE

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

Top dark themes for VS Code

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 VS Code 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 VS Code:

One Dark Pro

One Dark Pro is the most popular and widely downloaded VS Code 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 VS Code and 181+ other apps. It has worldwide downloads of over 2 million and has received a 4.9 average rating from 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 Darcula, the latter offers a painstakingly dark color scheme for 195+ apps, code editors, and terminal emulators, including VS Code. For a unified experience in JetBrains’ IDEs, Darcula is an excellent option.

Download Darcula

Synthwave ’84

The Synthwave ’84 theme is a simple CSS theme that celebrates ’80s aesthetics in modern web development. It’s 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 more elegant and classier themes.

Download Synthwave ’84

Atom One Dark Theme

Created by Mahmoud Ali, it served as an inspiration for the 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 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 while the rest of the world is asleep? The Night Owl theme will keep you motivated throughout the night. It features a light and dark theme, taking into consideration people with colorblindness and allows for easy viewing in daylight.

Download Night Owl

Top light themes for VS Code

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 VS Code:

Quiet Light

Built first for the Espresso text editor on Mac, Quiet Light is an official port of the Quiet Light Theme. Although VS Code 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 VS Code. Although Adobe ended its support for Brackets in 2021, you’ll love using 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’ll never go wrong with 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 VS Code

VS Code 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 VS Code:

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 VS Code. It’s 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 Theme

Winter is Coming

Dark Blue HTML
Dark Blue JavaScript
Dark Blue TypeScript
Light JavaScript
Light JavaScript

If you’re a top fan of Game of Thrones, you’ve 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 a 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 VS Code 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 to use in bright and low-light environments.

Download Nu Disco

Wrapping up

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

As we begin 2024, 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 colorful 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.

Stay updated and learn how to optimize your software development with Tabnine AI

Tabnine is the AI coding assistant that accelerates and simplifies software development while keeping your code private, secure, and compliant.

Try Tabnine Pro free for 90 days!

[cta_btn url=”https://www.tabnine.com/pricing/landing” label=”Start a free trial”]