DEV Community

Cover image for 23 Stunning VSCode Themes for Any Lighting
Ayoub Khial
Ayoub Khial

Posted on • Originally published at ayoubkhial.com

23 Stunning VSCode Themes for Any Lighting

This article is originally published at ayoubkhial.com.

Introduction

In the intricate world of coding, aesthetics often serve more than mere visual pleasure. A soothing and adaptable interface is paramount as developers spend countless hours staring at their screens. One crucial aspect of this environment is the code theme, which dictates the color and style of the text and background that programmers work with daily. A theme that supports both light and dark modes allows customization according to individual preferences and can contribute to reduced eye strain, increased productivity, and a more pleasurable coding experience. Moving towards a more inclusive and adaptable design, we have curated a collection of 23 remarkable code themes that embrace light and dark modes. These themes transcend aesthetics, allowing developers to tailor their working environment to their comfort, mood, or even the time of day.

How to automatically switch themes

Before starting with our curated collection, add the following fields to use user settings to automatically switch between light and dark themes in Visual Studio Code based on the operating system's appearance preferences.

{
    "window.autoDetectColorScheme": true,
    "workbench.preferredLightColorTheme": "Github Light",
    "workbench.preferredDarkColorTheme": "Github Dark",
    ...
}
Enter fullscreen mode Exit fullscreen mode
  • "window.autoDetectColorScheme": true: This enables VS Code to automatically detect and switch between light and dark color schemes based on the operating system's settings.
  • "workbench.preferredLightColorTheme": "Github Light": This sets the preferred light theme to "Github Light." When the operating system uses a light appearance, VS Code will switch to this theme.
  • "workbench.preferredDarkColorTheme": "Github Dark": Similarly, this sets the preferred dark theme to "Github Dark." VS Code will switch to this theme when the operating system uses a dark appearance.

If you want more control to switch modes, a handy extension called Toggle Light/Dark Theme provides a quick toggle between light/dark themes in VS Code using our already-defined settings.

Toggle Light/Dark Theme extension

Remember that using the same theme for both light and dark modes is unnecessary. You have the flexibility to mix and match according to your preferences.

The collection

This particular collection offers a diverse mixture of themes, encompassing those that may be less familiar to some and those that are widely recognized and appreciated.

Ayu

The Ayu theme offers three distinct variations - Light, Mirage, and Dark. It boasts a simplistic, contemporary design that draws inspiration from the color scheme of the Sublime Text editor.

Marketplace page - VSCode web

Ayu VSCode Theme

Bearded Theme

The Bearded theme boasts an exquisite subtlety, where colors harmoniously dance off one another, creating an aesthetically pleasing visual experience while ensuring clear and legible text. With an impressive collection of 32 theme variations, this theme stands out as one of the favorites.

Marketplace page - VSCode web

Bearded VSCode theme

Calm Days, Sober Nights

This theme is versatile and suitable for bright daylight and mysterious nighttime. It caters to the needs of all coders.

Marketplace page - VSCode web

Calm Days, Sober Nights VSCode Theme

Catppuccin for VSCode

Catppuccin is a minimal and aesthetic dark & light theme, designed to be pleasant and relaxing to your eyes, reducing the fatigue you could get from long coding sessions. It's notable for its warm, balanced color palette.

Marketplace page - VSCode web

Catppuccin VSCode Theme

Community Material Theme

The Community Material Theme is inspired by the original Material Theme. This theme offers various color options based on the popular Material Theme, allowing you to choose the one that suits your preferences and coding environment.

Marketplace page - VSCode web

Community Material VSCode Theme

Eva Theme

The Eva Theme's color scheme draws inspiration from the color palettes used in the "Eva Design System", which is why it bears the same name. The colors are thoughtfully picked to create visually pleasing themes without compromising readability.

Marketplace page - VSCode web

Eva VSCode Theme

Everforest

Everforest is a natural and comfortable color scheme designed to be easy on the eyes. It uses shades of green and earthy colors associated with nature, resulting in a soothing color scheme that reduces eye strain during long coding sessions.

Marketplace page - VSCode web

Everforest VSCode Theme

Flat UI

The Flat UI theme is inspired by the widely used Flat UI color palette. This color palette stands out for its bold, vibrant colors and minimalistic design. As a result, the Flat UI theme is an excellent option for developers who appreciate bright, clear, and appealing color combinations.

Marketplace page - VSCode web

Flat UI VSCode Theme

GitHub Theme

The color scheme of GitHub serves as an inspiration for the GitHub Theme. It offers a uniform appearance similar to that of GitHub, which can be attractive to individuals who frequently browse through code and issues on GitHub.

Marketplace page - VSCode web

GitHub VSCode Theme

Linear Theme

A visually stunning Visual Studio Code theme, drawing inspiration from the popular issue tracking tool, Linear. This theme adopts colors from Linear's interface while making subtle adjustments to optimize your coding experience.

Marketplace page - VSCode web

Linear VSCode Theme

Material Theme

Material Theme is one of the most popular themes for Visual Studio Code. Google's Material Design guidelines inspire it, hence the name. The theme has several color schemes, each providing your code editor with a cohesive and modern look.

Marketplace page - VSCode web

Material VSCode Theme

Min Theme

The Min Theme for Visual Studio Code is a sleek, minimalist design that keeps your workspace clean and simple. Minimizing visual elements reduces clutter and potential distractions, allowing you to focus on coding efficiently and effectively.

Marketplace page - VSCode web

Min VSCode Theme

Minimal Wave

This theme has a minimalist design with a touch of Synthwave style. It features two themes - Dark Floral and Light Floral.

Marketplace page - VSCode web

Minimal Wave VSCode Theme

Moxer Theme

From the creators of Material Theme, Mower is a theme designed to elevate your DX to new heights.

Marketplace page - VSCode web

Moxer VSCode Theme

Night Owl

Night Owl is a widely used color theme created by Sarah Drasner, catering to the requirements of developers who work at night, suffer from colorblindness, or operate in low-light settings. Its color palette has been carefully selected to minimize eye strain and provide a comfortable visual experience.

Marketplace page - VSCode web

Night Owl VSCode Theme

Relax Eyes Theme

The Relax Eyes theme features a calming color scheme centered around shades of green. This soothing palette creates a tranquil and peaceful atmosphere, perfect for unwinding and destressing after a long day.

Marketplace page - VSCode web

Relax Eyes VSCode Theme

sema

A theme that prioritizes what truly matters. Inspired by 'semantic highlighting,' it elevates code with intelligence, not just syntax. With a color scheme heavily based on grb24bit, Sema strikes the perfect balance between vibrancy and elegance.

Marketplace page - VSCode web

sema VSCode Theme

Serendipity

Serendipity is a theme that boasts an exquisite and simplistic color palette. This particular theme has been designed to provide a comfortable working experience for your eyes when working on different interfaces.

Marketplace page - VSCode web

Serendipity VSCode Theme

Slack Theme

The "Slack Theme" is a theme that replicates the colors and styling of the popular communication platform Slack. This theme allows you to bring the familiar color scheme of Slack to your coding environment, making for a unified visual experience if you're a regular Slack user.

Marketplace page - VSCode web

Slack VSCode Theme

Sublime Material Theme

The "Sublime Material Theme" is inspired by Mattia Astorino's Sublime Text theme of the same name. It offers a sleek and distraction-free UI layer to your VS Code. The theme focuses on a minimalist design, with tastefully curated color palettes for different editor elements.

Marketplace page - VSCode web

Sublime Material VSCode Theme

Tinacious Design theme

"Tinacious Design" is a color scheme for Visual Studio Code that Tina Holly designed. The color theme is vibrant and pleasing to the eye, with various colors used for different elements to make distinguishing code at a glance easier.

Marketplace page - VSCode web

Tinacious Design VSCode Theme

Tokyo Night

"Tokyo Night" is a sleek theme for Visual Studio Code, featuring a balance of dark and light elements. The theme boasts a palette of soft pastel colors set against a dark backdrop inspired by the stunning night view of Tokyo. It's designed to be gentle on the eyes, minimizing eye strain for extended coding sessions.

Marketplace page - VSCode web

Tokyo Night VSCode Theme

Winter is Coming Theme

One popular color theme for Visual Studio Code is "Winter is Coming," created by John Papa. It features a range of gentle colors on the eyes and is especially popular among developers who prefer dark themes or work in dimly lit environments.

Marketplace page - VSCode web

Winter is Coming VSCode Theme

Conclusion

We've come to the end of our tour featuring 23 amazing code themes that cater to both light and dark modes. Whether you prefer designs that are easy on the eyes or styles that bring a smile to your face, there's definitely a theme here that suits every coder.

Explore more creative coding themes by visiting vscodethemes and vscolors.

Oldest comments (0)