DEV Community

Cover image for 50 VS Code themes for 2020
Geoff Stevens for Software.com

Posted on • Edited on • Originally published at software.com

Best VSCode Themes 50 VS Code themes for 2020

If you're looking for a new theme to change up your code editor in the new year, I'm here to help! Check out a variety of stylish themes with unique color palettes—from sleek to snazzy to vibrant and everything in between—to see what works best for you. I've even included a few interesting icon packs to customize VS Code even more.

I've organized these VS Code themes into the following sections:

To install a theme in VS Code, simply visit the marketplace and select the theme you would like to download. To switch between installed themes, open the command palette with CMD/CTRL + SHIFT + P and type Preferences: Color Theme. You can then browse through your themes in the menu.

Trending

Discover new trending themes for VS Code that are growing in popularity.

1. Radical

Radical VS Code theme

2. Gruvbox Material

Gruvbox VS Code theme

3. Merko

Merko VS Code theme

4. Tokyo Night

Tokyo Night VS Code theme

5. Remedy

Remedy VS Code theme

6. Minimal

Minimal VS Code theme

7. Aurora X

Aurora X VS Code theme

8. Atlantic Night

Atlantic Night VS Code theme

9. Glass UI

Glass UI VS Code theme

10. A Touch of Lilac

Lilac VS Code theme

11. FireFly Pro

FireFly Pro VS Code theme

12. ReUI

ReUI VS Code theme

13. Slime

Slime VS Code theme

14. Signed Dark Pro

Signed Dark Pro VS Code theme

15. Ariake Dark

Ariake Dark VS Code theme

16. Snazzy Light

Snazzy Light VS Code theme

17. Spacegray

Spacegray VS Code theme

18. Celestial

Celestial VS Code theme

19. Blueberry Dark

Blueberry VS Code theme

20. Bear

Bear VS Code theme

Dark

Do you prefer to work in the dark? Discover some of the best dark themes for VS Code.

You can also install all of these dark themes by installing our Best Dark Themes Pack.

21. One Dark Pro

One Dark Pro for VS Code

22. Dracula Official

Dracula Official for VS Code

23. Nord

Nord for VS Code

24. Palenight

Palenight for VS Code

25. One Monokai

One Monokai for VS Code

26. Night Owl

Night Owl for VS Code

27. Andromeda

Andromeda for VS Code

28. Darcula

Darcula for VS Code

29. Horizon Theme

Horizon for VS Code

30. Cobalt2

Cobalt2 for VS Code

Light

Want something lighter for you code editor? Check out these stylish light themes.

You can also install all of these light themes by installing our Best Light Themes Pack.

31. Atom One Light

Atom One Light for VS Code

32. Bluloco Light

Bluloco Light for VS Code

33. Brackets Light Pro

Brackets Light Pro for VS Code

34. Ysgrifennwr

Ysgrifennwr for VS Code

35. NetBeans Light

NetBeans Light for VS Code

36. Quiet Light

Quiet Light for VS Code

37. Hop Light

Hop Light for VS Code

38. NotepadPlusPlus Remixed

NotepadPlusPlus Remixed for VS Code

39. GitHub Light

GitHub Light for VS Code

40. GitHub Plus

GitHub Plus for VS Code

Colorful

Tired of monochromatic themes and dull color palettes? Add some color to your editor with these colorful themes.

You can also install all of these colorful themes by installing our Best Colorful Themes Pack.

41. Shades of Purple

Shades of Purple for VS Code

42. SynthWave

SynthWave  for VS Code

43. Code Blue

Code Blue for VS Code

44. Cyberpunk

Cyberpunk for VS Code

45. LaserWave

LaserWave for VS Code

46. Zeonica

Zeonica for VS Code

47. Hipster

Hipster for VS Code

48. Wildberry

Wildberry for VS Code

49. Qiita

Qiita for VS Code

50. Soft Era

Soft Era for VS Code

Bonus: Icons

VS Code also lets you customize the icons in your editor. New icons will appear in the VS Code Side Bar to help you visualize different files and folders. You can install icon packs as you would other themes.

To change the icons in your editor, open the command palette with CMD/CTRL + SHIFT + P and enter the command Preferences: File Icon Theme. You can then browse your installed icon themes from the menu and preview them in real time.

51. Quill

Quill Icon pack for VS Code

52. Helium

Helium Icon pack for VS Code

53. Seedling

Seedling Icon pack for VS Code

54. City Lights

City Lights icon pack for VS Code

55. Keen Neutral

Keen Neutral icon pack for VS Code

56. Chalice

Chalice icon pack for VS Code

What's next?

Looking for even more themes? Try searching the VS Code marketplace and sorting by Themes. Developers have created more than 2,500 themes that you can pick from to customize VS Code.

Want to create your own VS Code theme? Learn how to create an extension, customize VS Code's color palette, and push your project to the VS Code marketplace in our tutorial: Launch a product in the VS Code Marketplace in 30 minutes or less.


I love building tools that make developers happy. If you like this post, you should also check out my other projects:

  • Code Time: free extension for automatic programming metrics and time-tracking, right in your editor
  • SRC: a strategic summary of the developer world in ten minutes or less—once a week, right to your inbox

Top comments (64)

Collapse
 
namchee profile image
Cristopher

Time to spend another 2+ hours for choosing themes!

Collapse
 
davychhouk profile image
Davy CHHOUK

hahhaha, that's time for happiness.

Collapse
 
whatthehanan profile image
Hanan Hamza

I can relate.

Collapse
 
edwing123 profile image
Edwing123

This happens to me, I will not feel good until I find the one I (kinda) like.

Collapse
 
lucasprag profile image
lucasprag

At least you didn't fall in the trap of building your own yet haha

Collapse
 
rtxa profile image
rtxa

Some great procrastination right there hehe!

Collapse
 
cambellajoe profile image
cambellajoe

I totally relate, this is me everytime 😅. It's unending quest.

Collapse
 
jschr profile image
Jordan Schroter

Great list! I think I must have used half of the dark ones at one point or another. If you like browsing the latest vscode themes you might like a site I've been working on: vscodethemes.com.

As you've found out, browsing themes from the marketplace is a bit of a pain. You need to click into each theme and hope the author provided a decent screenshot.

I wanted a more consistent way to browse, hope others enjoy it too :)

Collapse
 
pratham82 profile image
Prathamesh Mali

Your site looks beautiful and its functional. great work

Collapse
 
milkywayrules profile image
Dio Ilham D

Cool! Thanks for make this site happens.

Collapse
 
korolpaul profile image
CSSKing

Thanx for your work!

Collapse
 
arpit016 profile image
Arpit Agarwal || Full Stack Developer ||

The site is very helpful Jordan. Thanks for sharing.

Collapse
 
mr_v_litvinenko profile image
Victor Litvinenko

I've been looking for a dark low-contrast vscode theme, something not too harsh on my eyes yet beautiful.
Finally I published my own theme called Soft Colors:
marketplace.visualstudio.com/items...

Collapse
 
bobsponja profile image
BobSsponja

Cara, Adorei o seu Tema estava mesmo Stagnado utilizando apenas os Temas Padroes do vsc, ate me deparar com o seu! muito bom, Obrigado. :)

Collapse
 
mr_v_litvinenko profile image
Victor Litvinenko

Muito Obrigado! Que bom que você gostou do meu tema.

Collapse
 
fat_tonyy profile image
Fat-Tony

I've tried thousands since I suck at development so I waste my time changing themes and my current is MOONLIGHT II but ROSE PINE is awesome too and more importantly super easy on the eyes.

MOONLIGHT

marketplace.visualstudio.com/items...

Rose Pine

marketplace.visualstudio.com/items...

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio • Edited

demo image
demo image

For theme and font, i'm using Mayukai Theme and Iosevka Mayukai Font . You can try that too.

Collapse
 
sangimed profile image
Mohamed I. • Edited

Love'em !

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio

Thanks, glad you like it :)

Collapse
 
dr1verrr profile image
Danylo

Bruh, thank you. I already used Iosevka but this variant that you recommend it is so cool!

Collapse
 
sangtran profile image
Robert

Does anyone know what the name of this theme is? Thanks a lots.
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
rediffusion profile image
rediffusion • Edited

Hi! I looked at these themes, cheers! 😉

Light:

Atom One Light Theme
Bluloco Light
Brackets Light Pro
NetBeans Light Theme
Quiet Light for VSC
Hop Light
NotepadPlusPlus Remixed Theme
GitHub Light

Dark:
GitHub Plus Theme

Collapse
 
vinicioslc profile image
Vinicios de Lima Clarindo

jfiddle pro light

Collapse
 
shreenanda8 profile image
Shreenanda

I am planning to shift to light theme :{
Because I don't like to keep the brightness of my computer high and without keeping the brightness high, it's not that much comfortable to work in dark theme.
Whenever I want to use browser, I have to reduce the brighness again..
It's very annoying...
If you guys have any solution, please let me know.
I don't really want to work with light theme :"{

Collapse
 
hassuunna profile image
Hassuunna

Dark Reader turns your broswer into dark as well

chrome.google.com/webstore/detail/...

Collapse
 
geoffreydonahue profile image
Geoffrey Donahue

Some want their editor to be light and vibrant, while others can prefer dark as their eyes are hurt by bright colors. But I received good information for the most common and downloaded themes for VS Code here.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Shades of Purple generously smothers your workspace with only the most extravagant shades of purple, deftly balancing purple with purple on purple.

Wow, this is an amazing way to put it. Thank you for the kind words on my theme/work. I'm gonna steal that and make it the official description everywhere. Woohoo! 🥳🥳🥳

Some comments may only be visible to logged-in visitors. Sign in to view all comments.