DEV Community

Cover image for Top 10 VS Code Themes
Muthu Annamalai Venkatachalam
Muthu Annamalai Venkatachalam

Posted on • Updated on • Originally published at muthuannamalai.tech

Top 10 VS Code Themes

Working in a nice place makes you feel more productive, if you enjoy the look of your code, then you also enjoy writing it, editing it, and painstakingly debugging it. If visuals are important to you, then you’ve come to the right place. Want to make VS Code look a lot better? There are several ways to customize Visual Studio Code, but you should start first with a great theme! 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. Learn more about them in this article!

How to change your Visual Studio Code theme

For MAC Users: ⌘K and then ⌘T to display the picker.

Or you can go to the Code > Preferences > Color Theme

For Windows Users: Ctrl + Shift + P

Or you can go to the File Icon >Theme Picker with File >Preferences >File Icon Theme

Here’s the list, choose whatever makes you productive.

1) Dracula Official:

Get It Here

1.png

2) Shades of Purple:

Get It Here

2.png

3) Winter is coming:

Get It Here

Winter is Coming Dark Blue Theme

3.png

Winter is Coming Dark Black Theme

4.png

Winter is Coming Light Theme

5.png

4) Night Owl

Get It Here

Night Owl

6.jpg

Light Owl

7.jpg

5) LaserWave:

Get It Here

8.png

6) Firefox Theme

Get It Here

Firefox Dark

9.jfif

Firefox Light

10.jfif

7) One Dark Pro

Get It Here

11.png

8) Cobalt 2

Get It Here

12.jfif

9) PaleNight

Get It Here

13.png

10) OutRun

Get It Here

OutRun Night

14.jfif

OutRun Electric

15.jfif

Additional Bonus Theme

GitHub Theme:

Get It Here

GitHub Theme for classic GitHub is available in light, dark, light default, dark default, and dark dimmed versions. There are many developers who prefer GitHub's classic themes to these themes, which are similar to official GitHub.com themes.

GitHub Theme

There you have it! Those are some of my favorite themes available for VS Code, do you use any of these themes as well? What's your favorite VS-Code theme? Let me know in the comments 👇 😊

To all my readers out here I have an interesting thing to share with you. Hint: That is about a Hackathon. Keep reading to know more

A hackathon might be an alternative for you if you are a computer science student or an upcoming developer. An online or physical hackathon allows you to develop your coding skills, gain experience working with developers, develop your resume, and meet peers in your field.

If you are looking for one such hackathon I can recommend Hack This Fall 2.0. It is happening between 22nd October to 24th October. For this season, they are taking this to a level higher with a 48 Hours Virtual Hackathon; where they are aiming to promote hackers and help them nurture their new ideas and prototypes in various domains. Their motto is also to involve more beginner hackers and support everyone to solve the shared problems of our society, to bring a change in a positive way.

If you want to register for this wonderful hackathon you can do it here and do not forgot to use my referral code: HTFHE060

You can now extend your support by buying me a Coffee.😊👇

Buy Me A Coffee

Thanks for Reading 😊

Discussion (61)

Collapse
sndst00m profile image
SNDST00M: M.U.N.I.N • Edited

My new theme dropped named Starfall. It's sorta a combination of Mirage, Nord, Material Palenight and One Dark.

Collapse
whippingdot profile image
Sanjaay R.

hey the reason I don't chose any theme other than one dark pro is because they have no colors for variables. If you add a color for vairables I will use the theme, cause I just got bored of white variables and I absolutely hate it! I love your theme other than the fact that the variables don't have a color so unfortunately I won't use it for now but if you add colors for variables I will definately use it a lot!

Also which languages does this theme work for?

Collapse
sndst00m profile image
SNDST00M: M.U.N.I.N • Edited

Add everything except the outer brackets to your settings.json:

{
  "editor.tokenColorCustomizations": {
    "[Starfall*]": {
      "textMateRules": [
        {
          "scope": [
              "variable.other.object",
              "variable.other.readwrite",
              "support.variable"
          ],
          "settings": {
            "foreground": "#ffcb6b"
          }
        }
      ]
    }
}
Enter fullscreen mode Exit fullscreen mode

Afaik it works for over 50 languages but I will set up a supported list soon™ - it's very extensive!

Thread Thread
whippingdot profile image
Sanjaay R. • Edited

Afaik? Also you are not the author so how do you know how many languages it works for?

Also where do I add that snippet

Thread Thread
sndst00m profile image
SNDST00M: M.U.N.I.N

I most certainly am the author! The snippet gets added in settings.json, see stackoverflow.com/a/65909052/15764156

Thread Thread
whippingdot profile image
Sanjaay R. • Edited

oh ok lol i saw a different name on my screen for the person who made the comment, sorry!

Also why don't you just make that change globally?

EDIT: It doesn't seem to work for my C++ file or my Python file. I think it is being overwritten by some CSS you have in the theme

Another thing - maybe add the syntax hylighting to code blocks in markdown files - the atom theme has that and it looks very nice

Thread Thread
sndst00m profile image
SNDST00M: M.U.N.I.N

Turns out it's as simple as this (again, remove the outer brackets if you have settings already):

{
  "editor.tokenColorCustomizations": {
    "[Starfall*]": {
      "variables": "#ffcb6b"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

I want to stay in line with Nord, One Dark and Material but you're welcome to use this snippet if it solves this.

Collapse
jmcelreavey profile image
John McElreavey

This looks amazing. I'm not at my computer at the moment to try it so apologies for asking but what colour does this make the file tab when there's errors / warnings? I like my current theme because it'll make them red when they have errors and green when I resolve them.

Collapse
sndst00m profile image
SNDST00M: M.U.N.I.N

In this theme, green is for added files in git when viewing the explorer and red is indeed for problem files in git generally. Though I'm fairly sure that green won't show up in the source control pane as there's the "Added" status

Collapse
whenixd profile image
Juan Carlos Manzanero Domínguez

I love this! Thanks

Collapse
adarsh077 profile image
Adarsh Senghani

Which font family are you using?

Cool theme by the way.

Collapse
sndst00m profile image
SNDST00M: M.U.N.I.N

Jetbrains Mono!

Collapse
thealpha706 profile image
TheAlpha706

Cool themes

But GitHub Dark is missing😳

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Fixed it. Thank you for suggesting it

Collapse
patrickwulfe profile image
Patrick Wulfe

While these are all great themes, the best is in fact Tokyo Night. It has better context highlighting than any of the listed themes (I have checked), is easier to read in any lighting condition (the only reason it beats horizon dark for my favorite theme). I'm extremely picky about themes (thus why I've tried literally every theme in this list for a good period of time) and Tokyo Night is the first I've actually been able to settle on.

Collapse
anridev24 profile image
Andronik Nazaryan • Edited

Same stuff for me, I'm using Tokyo Night and i love it

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Absolutely Tokyo Night is a great theme to use

Collapse
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming

You forgot the two best ones:

  1. Canvas
  2. Blueberry

Those are the best.

canvas

Blueberry

Collapse
abdullmng profile image
abdullmng

No way you will make a list of awesome themes without GitHub dark. This list is incomplete

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Fixed it. Thank you for suggesting

Collapse
gulajavaministudio profile image
Gulajava Ministudio

Wow thank you for the list.
You can try our VS Code Themes too, it named "Mayukai Theme" . This theme can be installed via VS Code Marketplace
Mayukai Theme

And here some demo about Mayukai Theme, hope you like it.
imagedemo
imagedemo1
imagedemo1
imagedemo1

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Looks great. Thank you for sharing

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

I have tried many themes and my all time favourite theme to work with in the VS Code is Shades of Purple because it was suggested by my supervisor and till now I am using the same one.

So in my case it is the Shades of the Purple on the Top <3

Collapse
fidaay profile image
fidaay

I like Monokai Pro and its substets too

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Great Themes to use

Collapse
charllie profile image
charllie

and yet you haven't put it in your top 10 😆

Collapse
thatanjan profile image
Anjan Shomooder

If you want to save your eye, use gruvbox theme

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Thank you for suggesting

Collapse
sharpninja profile image
The Sharp Ninja

I rather like the theme I created: QBasic Dark

QBasic Dark

Collapse
moutafatin1 profile image
moutafatin1

I like One Monokai

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Great Theme to use

Collapse
oskarcodes profile image
Oskar Codes

Great article, however you should probably change the banner image because it shows the Visual Studio icon, not the Visual Studio Code icon

Collapse
yanielcuellar profile image
Mick Brown

Thanks for sharing.

Collapse
thahobbyist profile image
ThaHobbyist

To be honest I liked the github theme more than the 10 mentioned...

Collapse
iamironblossom profile image
Ishtiaq Mahmood Amin

Are there any free alternative of Operator Mono font?

Collapse
danspinola profile image
Dan Spinola

I use Omni, it's based off of Dracula, but I find more comfortable.

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Great Theme to use

Collapse
esteban_vc7 profile image
evc7-(...31%)

Im currently using LubnaDev-Theme is really cool :)

Id: lubnadev.lubnadev-theme
Description: Bright and colourful dark theme.
Version: 1.0.0
Publisher: LubnaDev
VS Marketplace Link: marketplace.visualstudio.com/items...

Collapse
sudipta profile image
SUDIPTA PRADHAN

Github dark, and Synthwave '84 are missing 🤧

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author • Edited

Thank you for suggesting. They are awesome too

Collapse
virejdasani profile image
Virej Dasani

Check out Hydroxy too, it's awesome!

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Thank you for suggesting

Collapse
barelyhuman profile image
Reaper

Taco Syntax
Rose Pine
Poimanderes

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Wonderful list of themes

Collapse
stuffsuggested profile image
Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Great List

Collapse
matengodev profile image
Davis O Matengo

Bookmarked... 🙏

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Thank you

Collapse
myleftshoe profile image
myleftshoe

Shades of Purple, yeah! Beautiful and vibrant.

Collapse
v4run profile image
Varun

One Dark Pro & Palenight - BEST for me!

Collapse
zephyrus21 profile image
Piyush Pandey

Try Bearder Theme Vivid Black, It's cool.

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author • Edited

Sure. Thank you for suggesting

Collapse
qq449245884 profile image
qq449245884

Dear Muthu Annamalai Venkatachalam,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam Author

Sure do it once done share me the articles

Collapse
yougotwill profile image
William Grant

I've been using Aperture for the last few months. The dark theme is great but the light theme is my favourite of all the light themes I've tried. github.com/pveyes/aperture

Collapse
pb profile image
Pawel

Checkout "JellyFish Theme" you'll gonna love it.

Here's the link: mycd.ml/jellyfish

Collapse
cyebukayire profile image
Peace

Thank you for sharing

Collapse
deevoid profile image
Dev

Try Andromeda