23 Stunning VSCode Themes for Any Lighting
Tags: vscode, themes, productivity
Published: 2023-08-03 16:17:25

_This article is originally published at [ayoubkhial.com](https://www.ayoubkhial.com/blog/23-stunning-vscode-themes-for-any-lighting)._

## 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.

```json
{
    "window.autoDetectColorScheme": true,
    "workbench.preferredLightColorTheme": "Github Light",
    "workbench.preferredDarkColorTheme": "Github Dark",
    ...
}
```

- `"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](https://marketplace.visualstudio.com/items?itemName=danielgjackson.auto-dark-mode-windows) provides a quick toggle between light/dark themes in VS Code using our already-defined settings.

![Toggle Light/Dark Theme extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtq97q2dx8y7k5b00e6s.gif)

> 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](https://marketplace.visualstudio.com/items?itemName=teabyii.ayu) - [VSCode web](https://vscode.dev/theme/teabyii.ayu/Ayu%20Dark)

![Ayu VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4y0a038i1l98aid3fpm.png)

### 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](https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme) - [VSCode web](https://vscode.dev/theme/beardedbear.beardedtheme/Bearded%20Theme%20Light)

![Bearded VSCode theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j48f643cqq14k8pfkc4q.png)

### 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](https://marketplace.visualstudio.com/items?itemName=giovanicascaes.calm-days-sober-nights-theme-vscode) - [VSCode web](https://vscode.dev/theme/giovanicascaes.calm-days-sober-nights-theme-vscode/Calm%20Days%2C%20Sober%20Nights%20-%20Night%20(no%20bold%20style))

![Calm Days, Sober Nights VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ini5dpqv5dgd3fsecbo.png)

### 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](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-icons) - [VSCode web](https://vscode.dev/theme/catppuccin.catppuccin-vsc/Catppuccin%20Latte)

![Catppuccin VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is0zt1qdf3h9743h3fb8.png)

### 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](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme) - [VSCode web](https://vscode.dev/theme/equinusocio.vsc-community-material-theme/Community%20Material%20Theme%20Darker)

![Community Material VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/feimihh018vlmy9eq5sr.png)

### 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](https://marketplace.visualstudio.com/items?itemName=fisheva.eva-theme) - [VSCode web](https://vscode.dev/theme/fisheva.eva-theme/Eva%20Light)

![Eva VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3els5fr9jdw0h4nza6t.png)

### 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](https://marketplace.visualstudio.com/items?itemName=sainnhe.everforest) - [VSCode web](https://vscode.dev/theme/sainnhe.everforest/Everforest%20Dark)

![Everforest VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jdytn0kyihfsxc4h1rr.png)

### 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](https://marketplace.visualstudio.com/items?itemName=lkytal.FlatUI) - [VSCode web](https://vscode.dev/theme/lkytal.flatui/FlatUI%20Dark)

![Flat UI VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d27d15uh9csxjlw2fy8u.png)

### 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](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) - [VSCode web](https://vscode.dev/theme/github.github-vscode-theme/GitHub%20Light)

![GitHub VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ilnrulom1qogpdhc5tn.png)

### 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](https://marketplace.visualstudio.com/items?itemName=pabue.linear-theme) - [VSCode web](https://vscode.dev/theme/pabue.linear-theme/Linear%20Theme%20-%20Dark)

![Linear VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3ub8c3f3yj4b4wc95gf.png)

### 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](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) - [VSCode web](https://vscode.dev/theme/equinusocio.vsc-material-theme/Material%20Theme)

![Material VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz0vjinjmidkprzdeik1.png)

### 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](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.min-theme) - [VSCode web](https://vscode.dev/theme/miguelsolorio.min-theme/Min%20Dark)

![Min VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oebln8qqr4k1fwm4gl6h.png)

### 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](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.min-theme) - [VSCode web](https://vscode.dev/theme/annalifatou.minimal-wave/Minimal%20Wave%20-%20Dark%20Floral)

![Minimal Wave VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpz4pn3tkyyqoqvjjdb9.png)

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

[Marketplace page](https://marketplace.visualstudio.com/items?itemName=Equinusocio.moxer-theme) - [VSCode web](https://vscode.dev/theme/equinusocio.moxer-theme/Moxer%20Light)

![Moxer VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy1j1ndqfvsf0yhx9wlw.png)


### 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](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) - [VSCode web](https://vscode.dev/theme/sdras.night-owl/Night%20Owl%20(No%20Italics))


![Night Owl VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqz57qacftb41vfprqve.png)


### 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](https://marketplace.visualstudio.com/items?itemName=liwei.relax-eyes-theme) - [VSCode web](https://vscode.dev/theme/liwei.relax-eyes-theme/Relax%20Light)

![Relax Eyes VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5bkenws14ud9sh26a13.png)

### 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](https://marketplace.visualstudio.com/items?itemName=arzg.sema) - [VSCode web](https://vscode.dev/theme/arzg.sema/sema)


![sema VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dg1z5mvvffu31w0bcxu.png)

### 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](https://marketplace.visualstudio.com/items?itemName=wicked-labs.wvsc-serendipity) - [VSCode web](https://vscode.dev/theme/wicked-labs.wvsc-serendipity/Serendipity%20Morning)

![Serendipity VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoqs2vptl3frapc55zz1.png)

### 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](https://marketplace.visualstudio.com/items?itemName=felipe-mendes.slack-theme) - [VSCode web](https://vscode.dev/theme/felipe-mendes.slack-theme/Slack%20Theme%20Dark%20Mode)

![Slack VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hmcll0nhl3urxxcrkkd.png)

### 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](https://marketplace.visualstudio.com/items?itemName=jprestidge.theme-material-theme) - [VSCode web](https://vscode.dev/theme/jprestidge.theme-material-theme/Sublime%20Material%20Theme%20-%20Light)

![Sublime Material VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp0uf732az4bocbd3rv2.png)

### 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](https://marketplace.visualstudio.com/items?itemName=tinaciousdesign.theme-tinaciousdesign) - [VSCode web](https://vscode.dev/theme/tinaciousdesign.theme-tinaciousdesign/Tinacious%20Design%20(Light))

![Tinacious Design VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kfym88tps1xgouh4mv9.png)

### 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](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night) - [VSCode web](https://vscode.dev/theme/enkia.tokyo-night/Tokyo%20Night)

![Tokyo Night VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyejmu5drfxm1edu68f5.png)


### 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](https://marketplace.visualstudio.com/items?itemName=johnpapa.winteriscoming) - [VSCode web](https://vscode.dev/theme/johnpapa.winteriscoming/Winter%20is%20Coming%20(Dark%20Black))

![Winter is Coming VSCode Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp7s47k59gxylas7itfw.png)

## 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](https://vscodethemes.com/) and [vscolors](https://www.vscolors.com/).