DEV Community

Cover image for Top 10 VS Code Themes

Top 10 VS Code Themes

Muthu Annamalai Venkatachalam on September 05, 2021

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 painsta...
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
 
y1a2s3h4 profile image
Yash Purohit

does it have ligatures displaying like in Fira Code Font in this Font?

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

The font is Jetbrains Mono and there should be a version with ligatures: jetbrains.com/lp/mono/

I don't apply italics to things other than markup, so the code ligatures won't be broken by my theme in your favorite ligature font! Of course you do have to enable ligatures in the VS Code settings

Thread Thread
 
y1a2s3h4 profile image
Yash Purohit

Oh 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

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

Absolutely Tokyo Night is a great theme to use

Collapse
 
ironcladdev profile image
Conner Ow

You forgot the two best ones:

  1. Canvas
  2. Blueberry

Those are the best.

canvas

Blueberry

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

Looks great. Thank you for sharing

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

Fixed it. Thank you for suggesting

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

Great Themes to use

Collapse
 
charllie profile image
charllie

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

Collapse
 
moutafatin1 profile image
moutafatin1

I like One Monokai

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

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
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

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

Sure do it once done share me the articles

Collapse
 
v4run profile image
Varun

One Dark Pro & Palenight - BEST for me!

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

Great Theme to use

Collapse
 
yanielcuellar profile image
Mick Brown

Thanks for sharing.

Collapse
 
matengodev profile image
Davis O Matengo

Bookmarked... 🙏

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Thank you

Collapse
 
virejdasani profile image
Virej Dasani

Check out Hydroxy too, it's awesome!

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Thank you for suggesting

Collapse
 
barelyhuman profile image
Reaper

Taco Syntax
Rose Pine
Poimanderes

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam

Wonderful list of themes

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

Great List

Collapse
 
zephyrus21 profile image
Piyush Pandey

Try Bearder Theme Vivid Black, It's cool.

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam • Edited

Sure. Thank you for suggesting

Collapse
 
sudipta profile image
Sudipta Pradhan

Github dark, and Synthwave '84 are missing 🤧

Collapse
 
muthuannamalai12 profile image
Muthu Annamalai Venkatachalam • Edited

Thank you for suggesting. They are awesome too

Collapse
 
myleftshoe profile image
myleftshoe

Shades of Purple, yeah! Beautiful and vibrant.

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
 
boika profile image
Andrei Boika • Edited

My favorite one is Son of Obsidian theme.
icon

Collapse
 
esteban_vc7 profile image
Esteban

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
 
revenant profile image
Allen

Hey Devs! Check out Tokyo Night by enkia. I love it!

Collapse
 
linhtch90 profile image
Linh Truong Cong Hong

Gruvbox is also a good choice. I use this theme on both VSCode and Vim editors.

Collapse
 
yougotwill profile image
Will G

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

Collapse
 
darcmadder profile image
Kemny

what about panda?

Collapse
 
redwancou profile image
Redwan Hossain