Visual Studio Code (VS Code) is an open-source code editor developed by Microsoft.
It has been my favorite code editor since 2018, while previously I was using Sublime Text.
The set of features of VS Code and the deep integration with TypeScript (from Microsoft too) made it my favorite and daily choice.
I can confirm that is currently broadly adopted by the community of frontend developers (React, Vue, Angular, but not only).
The different story is for the backend developers, who usually prefer IntelliJ products.
Considering VS Code is the editor we use daily, we want to select the best theme possible for some reasons:
- nice color scheme (aesthetics is important)
- improve the readability of the code
- reduce eye strain
- increase productivity
Follows a selection of 23 themes, some of them very popular, others not that much.
Scroll the list until the end, you never know when you can find the theme you’ll fall in love with.
I won’t tell you which is my favorite theme to avoid influencing you 🙂
Before the list, let’s discover how to install a new theme on VS Code.
How to install a theme in VS Code
- Open the Extension tab (Shift + Cmd + X)
- Type the theme name
- Click on Install
- Select and Set the Color Theme
Let’s get started with the themes.
Themes
1. One Dark Pro
Installs: 8,878,463
Widely used theme, which is the Atom’s dark theme with a black background.
2. Dracula Official
Installs: 6,678,172
One of the most popular themes in the development space.
3. GitHub Theme Dark
Installs: 11,813,086
Designed by GitHub, this theme replicates the UI of the GitHub’s website.
4. GitHub Theme Light
Installs: 11,813,086
Light variant of the GitHub website theme.
5. Winter Is Coming
Installs: 2,707,566
This theme mixes pleasant and high-contrast colors, with font styles, like italics.
6. Night Owl
Installs: 2,443,039
This theme has a dark blue background, with contrasting text colors. It has a light variant called Light Owl.
7. Monokai Pro
Installs: 2,711,098
One of the most known themes (I remember using it with Sublime Text).
It’s made of three main colors, dark red, yellow and light blue.
8. One Monokai
Installs: 2,117,317
This theme is a spin-off of Monokai Pro.
9. Shades of Purple
Installs: 1,756,519
If you like purple, you’ll love this theme.
10. Ayu
Installs: 2,331,017
Highly contrasted theme with pleasant text colours, orange, green, and light blue.
11. Palenight
Installs: 639,141
This theme is on the shades of purple, but not as heavily purple as Shades of Purple.
12. Cobalt2
Installs: 1,436,181
Super high contrast theme, with almost fluorescent colors.
13. SynthWave '84
Installs: 1,743,153
Iconic theme if you like the 80s and the synthwave style.
14. Noctis
Installs: 1,004,008
Theme designed on the shades of green.
15. Panda
Installs: 928,562
If you like pandas and the Japanese world, you’ll love Panda.
16. Nord
Installs: 905,995
The theme Nord wasn’t to bring you the colors or a nordic landscape into your code editor.
Soft and cold colors are making this theme very stylish.
17. Sublime Material
Installs: 821,819
18. Slack Theme
Installs: 395,047
If you want to keep using the Slack theme in your code editor, this is the perfect theme for you.
It comes in many variants.
19. Tokyo Night
Installs: 1,359,936
Popular theme that reminds me of movies like Ghost in the Shell. So stylish.
20. Rouge
Installs: 34,931
VSCode theme created for a dark, material feel with a flushed color palette. Inspiration was drawn from Atom's Material.
21. Poimandres
Installs: 52,108
Poimandres is a minimal, frameless dark-theme inspired mostly by blueberry. This theme tries to focus on semantic meaning instead of color variety. You'll find that it colors things like errors, voids, throws and deletes in red, types are slighty darker so that the spotlight is on the code, green new's, etc.
22. Flate
Installs: 15,435
Colorful and dark theme. I love the contrast between the syntax keywords like import and from and the variables names.
23. Bluloco Dark
Installs: 337,834
A fancy but yet sophisticated dark designer color scheme / theme for Visual Studio Code.
This theme features a much more comprehensive usage of syntax scopes and color consistency, with due regard to aesthetics, contrast, and readability. Originally forked from the beautiful One Dark Theme, enhanced with the meaningful intuitive Bluloco color palette.
Conclusion
That’s all for this sequence of great themes for Visual Studio Code.
If you liked them, or you want to suggest more themes, feel free to reach out to me via email or on Twitter/X.
Top comments (5)
Try this Minimal Kiwi Theme, you will love it. BTW I created this theme and my colleagues loved it.
I am very sorry: This unqualified list is a real shame.
Just like the concept of ”Form follows function” is ingenious (you can also turn it around: a form should support a function), the same must apply to a color scheme: ‘Color follows function’.
NONE(!) of these color schemes support the developer in his work, because they only distribute more or less random pretty colors to different objects.
While writing code, a good, useful color scheme must draw the eye to the important code elements.
But these color schemes almost invariably draw the eye to unimportant things like the “#Import” statement instead of the element that is actually being imported.
Or the color highlights the type of a variable, while the eye has to laboriously search for the variable in the code.
The really bad thing about this "Best VS Code Themes" list is that terrible color schemes that only offer a pretty look but ZERO function are rewarded.
Kind regards,
Thomas
Hi @jehoshua I like your comment, and I agree with you
I created this theme a while back, and tried to apply these concept
G Dark-Themes
I am still making changes when I have time, and planning a major update as soon as I enough free time, mostly to organized, and reduce color noises with only 2 to 3 shade/tint of a foreground, background, etc.
I you have time, please leave a comment or any suggestion on the git repository.
Thanks
My favourite one is Hackthebox
Thanks @pranjal-barnwal awesome theme!