Back to Tech Tips

Best VS Code Themes 2022

10 Cool VS Code Themes for Developers

Colourful bars laid out vertically to create a rainbow gradient

Blog — Tech Tips Best VS Code Themes 2022

3 min read

Sennah Yee, Content Manager at Juno College

By Sennah Yee

Content Manager

Juno College

Hey developers, looking to customize your VS Code theme? Here’s how!

One of the most important tools in a developer’s toolkit is a text editor. A text editor is where a developer does the majority of their coding and problem-solving. There are many different kinds in the world of development, each with their own features and customization options.

At Juno, we use Visual Studio Code in our Web Development course and Web Development Bootcamp. VS Code is one of the most widely-used text editors by developers. It has many themes and plugins developed directly for it, and it’s very easy to use.

We'll show you how to change the colours in Visual Studio Code, plus 10 cool themes that every developer should try out!


How to change your VS Code theme and colours

Looking to personalize your Visual Studio Code? You can change its theme, colours, and font easily through its settings. Go to:

  • File > Preferences > Color Theme on a PC
  • Code > Preferences > Color Theme on a Mac, or use the shortcut Command + K + T

You should see this on your screen:

How to change your VS Code theme

Move up and down with your cursor to preview what the themes look like. If you find one you like, either click on it or press enter to make it your new colour theme - and voilà!

If you want a new colour theme that isn’t listed, there are hundreds of free options to choose from in the VS Code Marketplace. You can also get to the VS Code Marketplace by clicking on the Extension button on the left side of your editor:

vs-code-extensions-button


10 Cool VS Code Themes

Now that you know how to change your VS Code theme, it's time to find one you love! Customizing your theme is a fun way to express your personality and change things up. We asked the Juno team to share some of their favourite VS Code Themes - here they are:

Horizon

If you're all about the vibes of a relaxing sunset, this theme is for you. Available in both dark and light modes:

Horizon VS Code theme

Install Horizon for VS Code

Pink Cat Boo

Who says coding can't be cute af? Prove them wrong with this adorable and warm theme:

Pink Cat Boo VS Code theme

Install Pink Cat Boo for VS Code

Dracula Official

One of the most popular dark themes, created by Zeno Rocha:

Dracula VS Code theme

Install Dracula Official for VS Code

Rainglow

This theme features a collection of over 320 colourful options - the possibilities are endless!

Rainglow VS Code theme

Install Rainglow for VS Code

Soft Era

A light pastel theme for those looking to make their code cozy and cute:

Soft Era VS Code theme

Install Soft Era for VS Code

Cobalt2

A sleek dark theme that works across many languages. Created by Wes Bos, one of Juno's first-ever instructors!

Cobalt2 VS Code theme

Install Cobalt2 for VS Code

Rosé Pine

A classy minimalist theme, available in three beautiful colour schemes:

Rosé Pine VS Code Theme

Install Rosé Pine for VS Code

Synthwave '84

A Juno favourite! This retro-looking theme lets you activate a cool glow effect:

Synthwave '84 VS Code theme

Install Synthwave '84 for VS Code

Tokyo Night

This theme is inspired by the lights of downtown Tokyo at night. Available in both dark and light modes:

Tokyo Night VS Code theme

Install Tokyo Night for VS Code

Fairyfloss

A whimsical, dreamy pastel theme to transport you to the clouds while coding:

Fairyfloss VS Code theme

Install Fairyfloss for VS Code


Looking to level up your coding skills?

Get hands-on training and build portfolio-worthy projects in our beginner-friendly and advanced coding courses.

Browse Online Coding Courses

Get started for free

Join our free monthly tech workshops and panel events!