Beautiful VS Code Themes
Visual Studio Code (VS Code) is a popular and powerful code editor that is widely used by developers around the world. One of the reasons for its popularity is its customisable interface, which allows users to change the appearance of the editor with various themes. With so many options to choose from, it can be overwhelming to find the perfect theme that not only looks great but also helps you stay focused while coding.
In this article, we will introduce you to 19 beautiful VS Code themes that you can use to enhance your coding experience. From vibrant and colourful to minimalistic and sleek, these themes are sure to make your code editor stand out while helping you stay productive. So, let's dive in and explore these amazing themes!
1. Dracula Official
If you're a vampire, firstly, don't tell anyone, secondly, you're going to love love love this theme! It's called Dracula Official. I'm going to say it's the 3rd most installed VS code theme. And it does look pretty cool — it's similar to shades of purple and Nu Disco but with a bit more yellow and bright green. It's been installed over 5.1 million times... so developers really like this one. There's a little vampire joke for you to enjoy in this snippet.
2. One Dark Pro
One Dark Pro sound like a Call of Duty game. It is in fact one of the most installed dark themes on VS Code marketplace. It is based on Atom’s iconic One Dark Theme. Lots of different great colors are used in the theme so that you enjoy the whole coding process and do not find it monotonous.
The One Dark Pro theme has been installed more than 6.7 million times to date in VS Code.
3. GitHub Theme
GitHub Theme for VS Code is based on the GitHub classic theme. It supports light and dark modes and multiple variations of the light/dark mode. If you like GitHub’s classic theme, then you will like this VS Code theme too.
The GitHub Theme has been installed more than 7 million times to date in VS Code.
Nord is a simple and clean dark theme for VS Code. It is based on arctic, north-bluish colour and provides great comfort to your eyes if you can’t code looking at themes that are too light or too dark.
The colour choice has been made brilliantly which makes this theme dark but not too dark. If you want something between a light and dark theme, this is a perfect choice. The Nord theme has been installed more than 715,000 times to date in VS Code.
5. Shades of Purple
Shades of Purple is one of its own kind professional VS Code theme with hand-picked bold shades of purple colour and a few contrast colours to provide a really good coding experience.
Colour theme, highlighting, etc of this theme is excellent. You will love it even more if you are a purple colour fan.
The Shades of Purple has been installed more than 1.3 million times to date in VS Code.
6. Winter is Coming Theme
Winter is Coming Theme is inspired by the House Stark from the Game of Thrones series. The theme features a cool blue colour scheme with hints of grey and white, giving it a clean and modern look.
With over 2.1 million downloads and a 5-star rating, it's a popular choice among VS code users.
7. Night Owl
Night Owl is a dark theme that is easy on the eyes. It features a dark blue colour scheme with contrasting yellow and orange accents.
With over 1.9 million downloads and a 5-star rating, it's one of the most popular themes in the VS code marketplace.
8. Monokai Pro
Monokai Pro is a professional theme that is easy on the eyes. It features a dark blue colour scheme with contrasting yellow and orange accents.
With over 2 million downloads and a 3.5-star rating, it's a popular choice among developers who want a sleek and modern look.
9. One Monokai
One Monokai is a simple and elegant theme that is easy on the eyes. It features a dark blue colour scheme with contrasting yellow and orange accents.
With over 1,7 million downloads and a 5-star rating, it's a popular choice among developers who want a minimalist look.
Ayu is similar to a few others on this list in terms of the colour scheme. The defining feature, and what sets it apart for me is that it's got a black background instead of charcoal. For some reason this makes all the code more visible and distinct. Ayu is one of the most popular themes on VS Code marketplace with over 1.8 million installs.
If you really really like purple then there's a chance you'll love this theme. Palenight is a pale purple theme. Almost like charcoal purple if there were such a thing. This is kind of a fun pretty look, I personally don't like the contrast of the colours, I think it's a little too subtle. But what do I know, if you like it you like it.
With over 1.2 million downloads and a 5-star rating, it's a popular choice among developers who want a sleek and modern look.
12. Cobalt2 Theme Official
This is the official theme of the guy who tries to customise his code editor simply because everyone else is doing it. Therefore he lands on the Cobalt2 blue theme. The colour preference of both a middle manager and a blind man. Anyway, we can't really judge because there over 1.1 million of these bros and I'm not about to start an argument over my least favourite colour...Or am I?
13. SynthWave ‘84
Retro theme. Hell yeah. SynthWave ‘84 screams, "we're so back!" in the midst of "it's so over." This is the theme we all need to be using as we wear pit vipers and code our way out of a job. The colours of this theme are pink and purple with hints of blue and teal.
Over 1.3 million Phonk house listeners have downloaded this 5-star rated theme. So what's stopping you?
I do like this theme a lot. The green tones and background are very custom. Noctis has a really nice feel to it. I'm taking a wild guess that this theme is named after Noctis Lucis Caelum, a Final Fantasy XV character. So this theme might hit differently if you're a FF fan or have just been sleeping in a crystal for 10 years. Downloads for this one exceed 790,000 plus a 5-star rating. A good choice for all of these reasons.
15. Panda Theme
Panda Theme is a colourful and modern theme with a charcoal-grey background. It features a bright colour scheme with contrasting shades of pink, blue, and green.
Panda, while I love the name it looks very similar to Ayu and One Dark Pro. It's basically the same so I'm not really understanding why 700,000 devs have installed this theme and given it a 5-star rating. But I'm not a hater, maybe something about this stands out to you! I hope you enjoy the little bear joke too.
16. Bluloco Light
This is one of my favourite themes — mostly because it's the only white one. Everything is in dark mode these days and so it's refreshing to see code displayed as it was in the early days; on a white text editor canvas. Bluloco Light is the theme and although it might not be as trendy as some of the others it is still easy on the eyes. This theme features a white and blue colour scheme with hints of yellow and green.
With over 300,000 downloads and a 5-star rating, it's a lesser-known but popular choice among developers who prefer light themes.
17. Nu Disco
Nu Disco is a purple theme that looks really good. It's similar to Shades of Purple but with darker tones. The colour scheme consists of contrasting shades of pink, blue, and purple.
This theme only has 25,000 downloads but due to its 5-star rating and the sudden interesting in the colour purple, it has been trending on the marketplace.
Find more VS Code themes...
Overall, these themes offer a wide range of styles and colour schemes to suit any developer's preferences. From sleek and modern to bright and colourful, there's a theme for every taste. With their popularity and high ratings, they're sure to enhance any developer's coding experience in Visual Studio Code. For more VS code themes check out the VS Code marketplace, there, you'll find new themes plus some great VS code extensions to help with productivity.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.