DEV Community

Cover image for 60+ VSCode themes you definitely need to try (dark + light)
_CODE
_CODE

Posted on

60+ VSCode themes you definitely need to try (dark + light)

#webdev #vscode #productivity #codenewbie

Hello, everybody!

I don't know about you, but I'm personally a huge fan of changing my VSCode theme every once in a while, mainly for productivity reasons.

So today I bring a list of more than 60 themes for you to try and test.

Check them out and tell me about your favorites in comments below 🙂

1. 2077

React code snippet with the 2077 theme

Atlantic Night

2. Atlantic Night

React code snippet with the Atlantic Night theme

3. Atlantic Night Abyss

React code snippet with the Atlantic Night Abyss theme

August

4. August - Ariake Dark

React code snippet with the August - Ariake Dark theme

5. August - City Lights Darker

React code snippet with the August - City Lights Darker theme

6. August - Dark

React code snippet with the August - Dark theme

7. August - Dawbridge

React code snippet with the August - Dawbridge theme

8. August - In Bed By 7pm

React code snippet with the August - In Bed By 7pm theme

9. August - In Bed By 7pm Darker

React code snippet with the August - In Bed By 7pm Darker theme

10. August - Night Owl

React code snippet with the August - Night Owl theme

11. August - Nord (Darker)

React code snippet with the August - Nord (Darker)theme

12. Aurora X

React code snippet with the Aurora X theme

Ayu

13. Ayu - Mirage

React code snippet with the Ayu - Mirage theme

14. Ayu - Light

React code snippet with the Ayu - Light theme

Base16

15. Base 16 - Dark Ashes

React code snippet with the Base16 - Dark Ashes theme

16. Base 16 - Dark Mocha

React code snippet with the Base16 - Dark Mocha theme

17. Base 16 - Dark Ocean

React code snippet with the Base16 - Dark Ocean theme

18. Base 16 - Dark Twilight

React code snippet with the Base16 - Dark Twilight theme

19. Base 16 - Unikitty

React code snippet with the Base16 - Unikitty theme

20. Base 16 - Light Mocha

React code snippet with the Base16 - Light Mocha theme

21. Base 16 - Light Pop

React code snippet with the Base16 - Light Pop theme

22. Base 16 - Light Tomorrow

React code snippet with the Base16 - Light Tomorrow theme

23. Bear Theme

React code snippet with the Bear theme

Bearded theme

24. Bearded Theme - Arc Blueberry

React code snippet with the Bearded - Arc Blueberry theme

25. Bearded Theme - Surprising Blueberry

React code snippet with the Bearded - Surprising Blueberry theme

26. Bearded Theme - Monokai Light

React code snippet with the Bearded - Monokai Light theme

27. City lights

React code snippet with the City Lights theme

28. Cobalt Next - Dark

React code snippet with the Cobalt Next - Dark theme

29. Cobalt 2

React code snippet with the Cobalt 2 theme

30. Code Blue

React code snippet with the Code Blue theme

Dobri Next

31. Dobri Next - C05 - Electron

React code snippet with the Dobri Next - C05 - Electron theme

32. Dobri Next - C09 - Eve

React code snippet with the Dobri Next - C09 - Eve theme

33. Dracula

React code snippet with the Dracula theme

34. Dracula At Night

React code snippet with the Dracula At Night theme

35. Electron

React code snippet with the Electron theme

36. Halcyon

React code snippet with the Halcyon theme

Horizon

37. Horizon

React code snippet with the Horizon theme

38. Horizon - Bright

React code snippet with the Horizon - Bright theme

39. LaserWave

React code snippet with the LaserWave theme

Material

40. Material Theme - Ocean

React code snippet with the Material - Ocean theme

41. Material Theme - Lighter

React code snippet with the Material - Lighter theme

Mayukai

42. Mayukai - Mirage

React code snippet with the Mayukai - Mirage theme

43. Mayukai - Mono

React code snippet with the Mayukai - Mono theme

44. Mayukai - Sunset

React code snippet with the Mayukai - Sunset theme

45. Min Theme - Dark

React code snippet with the Min - Dark theme

Night Owl

46. Night Owl

React code snippet with the Night Owl theme

47. Night Owl - Light

React code snippet with the Night Owl - Light theme

48. Noctis - Hibernus

React code snippet with the Noctis - Hibernus theme

49. Overnight - Slumber

React code snippet with the Overnight - Slumber theme

50. Panda Syntax

React code snippet with the Panda Syntax theme

51. Radical

React code snippet with the Radical theme

Rosé Pine

52. Rosé Pine

React code snippet with the Rosé Pine theme

53. Rosé Pine - Dawn

React code snippet with the Rosé Pine - Dawn theme

Rouge

54. Rouge

React code snippet with the Rouge theme

55. Rouge 2

React code snippet with the Rouge 2 theme

56. Sea Green Theme

React code snippet with the Sea Green theme

57. SynthWave '84

React code snippet with the SynthWave '84 theme

Tinacious Design

58. Tinacious Design

React code snippet with the Tinacious Design theme

59. Tinacious Design - Light

React code snippet with the Tinacious Design - Light theme

60. Tokyo Night

React code snippet with the Tokyo Night theme

61. Vue Theme

React code snippet with the Vue theme

🎉 Don't forget to follow me on Instagram and Twitter for more related content.

Top comments (4)

Collapse
 
mslee017 profile image
mslee017 •

Man, thank you for this....Bearded Theme Surprising Blueberry is absolutely gorgeous. I've been looking for a theme that has both light and dark variants I enjoy and while I really like Noctis Hibernus, don't really love the palettes on the dark variants even though they have nice semantics. Bearded is perfect IMO however

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio •

Thank you for adding Mayukai Theme in the list. Hope everyone enjoy using it.

Collapse
 
underscorecode profile image
_CODE •

Great theme!

Collapse
 
zoomlin profile image
Denis Troepolskiy •

I like bearded theme vivid purple 💜

Read next

cp_nandani profile image

Building a Better Monorepo with TypeScript, Turborepo, or Nx

Nandani Sharma -

witcher_1001 profile image

🌐 SSH Tunneling: Securely Connect to Remote Networks Like a Pro

The Witcher -

jackdavid profile image

🚀 Introducing SuperPowerGenerator.com! 💥

Jack David -

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -