Top 10 VS Code Themes
Tags: vscode, webdev, javascript, beginners
Published: 2021-09-05 05:45:56

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](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625567841148/donRBUHoB.png)

## 2) Shades of Purple:

[Get It Here](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625568020894/gRP6U8QGxq.png)

## 3) Winter is coming:

[Get It Here](https://marketplace.visualstudio.com/items?itemName=johnpapa.winteriscoming)

**Winter is Coming Dark Blue Theme**

![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625568786606/P3rFSRfit.png)

**Winter is Coming Dark Black Theme**

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625568853223/2L13Bceee.png)

**Winter is Coming Light Theme**

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625568874456/MTqf3rns1.png)

## 4) Night Owl

[Get It Here](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)

**Night Owl**

![6.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1625568952881/vgiEhrmNV.jpeg)

**Light Owl**

![7.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1625568972567/E8LjczvZ5.jpeg)

## 5) LaserWave:

[Get It Here](https://marketplace.visualstudio.com/items?itemName=jaredkent.laserwave)

![8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569126528/JnkJtJ9h5.png)

## 6) Firefox Theme

[Get It Here](https://marketplace.visualstudio.com/items?itemName=Heron.firefox-devtools-theme)

**Firefox Dark**

![9.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569346787/c2YBkZIs4.jpeg)

**Firefox Light**

![10.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569374022/zLEbJ7DAV.jpeg)

## 7) One Dark Pro

[Get It Here](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

![11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569462948/M-kxShveLH0.png)

## 8) Cobalt 2

[Get It Here](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)

![12.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569519439/TayxhTmFV.jpeg)

## 9) PaleNight

[Get It Here](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)

![13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569581264/CSf_tJrch.png)

## 10) OutRun

[Get It Here](https://marketplace.visualstudio.com/items?itemName=samrapdev.outrun)

**OutRun Night**

![14.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569704886/E7HnyWzDs.jpeg)


**OutRun Electric**

![15.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625569715291/YQssWgWgg.jpeg)

## Additional Bonus Theme

### GitHub Theme:

[Get It Here](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ls9tv7adoi1em6cjz3n.png)

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](https://hackthisfall.devpost.com/) 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](https://www.buymeacoffee.com/muthuannamalai)

Thanks for Reading 😊