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.
You can increase productivity by using an AI-powered autocomplete tool 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. While software development is an ever-evolving field, we must remain at the forefront of current trends and acquire the necessary knowledge. Learn how to implement AI in software development here.
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 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 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
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
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 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.
Get Started