EN

Tips・Use VS Code faster

Recommended VSCode color themes

Just changing the colors of the screen you write code on changes both readability and your mood. From staple dark themes to light ones and the more distinctive, here they are with screenshots.

The colors of the screen you write code on can be changed however much you like, anytime. Just by installing one extension called a color theme, both readability and your mood change completely. Here are staple themes, by type, with screenshots.

TipsVSCode extensions worth installingA theme is a kind of extension too. The basics of installing them are over here

How to switch themes

  1. From the Extensions panel, Install the theme extension you like
  2. Press Ctrl+K then Ctrl+T (on Mac, Cmd+K then Cmd+T) to open the theme selection screen
  3. Choose with the up/down keys and it previews on the spot. Once decided, press Enter

Even if a theme you install doesn’t grab you right away, you can switch to another one anytime with these steps. Feel free to try several.

Points to consider when choosing a theme

You can choose by look and preference alone, but checking these three points as well means fewer regrets later.

  • Contrast between text and background: too dark or too bright tires the eyes. If you write code for long stretches, a color scheme that isn’t too saturated is easier to stick with
  • Range of supported languages: the more popular a theme, the more completely its syntax highlighting covers languages beyond HTML/CSS/JavaScript (like PHP and Python). With a lesser-known theme, some code may stay a single color with no highlighting at all
  • The extension’s download count and rating: the numbers shown in the Extensions panel search results. A theme with a high count keeps getting updated too, so it’s reassuring for long-term use

Type 1: Staple dark themes

The kind that’s easy on the eyes and chosen most often.

One Dark Pro

A calm, bluish dark theme you could call the most-used in the world.

A VSCode editor screen. On a bluish dark background, tags and strings are color-coded in blue, green, orange, and more
The page that appears when you search “One Dark Pro.” Not too flashy and easy to read — when in doubt, you can’t go wrong starting here.

Dracula Official

A dark theme based on purple with clear contrast.

A VSCode editor screen. On a deep purplish dark background, pink, yellow, and green text stands out crisply
The page that appears when you search “Dracula Official.” The color differences are clear, making it easy to tell the types of tags and strings apart.

Type 2: Eye-friendly light themes

In a bright room or during daytime work, a theme with a whitish background can be easier to see.

GitHub Theme

A theme with a simple, familiar color scheme put out officially by GitHub.

A VSCode editor screen. On a white background, nested HTML is displayed cleanly in green, blue, and gray text
The page that appears when you search “GitHub Theme.” Both dark and light versions are included in one extension, and you can switch between them.

Ayu

An eye-friendly light theme based on pale beige.

A VSCode editor screen. On a light beige background, code is displayed in soft-toned text
The page that appears when you search “Ayu.” Its soft, not-pure-white background is easy on the eyes even during long work.

Type 3: Themes with standout personality

Atmospheric themes for those who want to enjoy the color scheme itself.

Night Owl

A theme where high-saturation text colors, like stars, shine against a navy background like the night sky.

A VSCode editor screen. On a deep navy background, code is displayed in high-saturation text colors like yellow and pink
The page that appears when you search “Night Owl.” Popular with people who work at night — as the name suggests, a color scheme for “night owls.”

Tokyo Night

An urban-feeling dark theme reminiscent of neon.

A VSCode editor screen. On a deep blue-purple background, text is displayed in neon colors like light blue and pink
The page that appears when you search “Tokyo Night.” Vivid accent colors within a calm base — suited to those who care about the look.

The six themes at a glance

Here are all six on one card, for skimming.

ThemeBrightnessColour feelSuits you if
One Dark ProDarkCalm, bluishWhen in doubt. The widest language coverage
Dracula OfficialDarkPurple + vividTelling kinds of code apart matters most
GitHub ThemeBothFamiliar, standardYou want dark and light in one package
AyuLightPale beigeYou like light but pure white dazzles you
Night OwlDarkNavy + high saturationYou work long hours at night
Tokyo NightDarkBlue-purple neonYou care about the atmosphere

Dark or light—which is better?

People often say dark is easier on the eyes, but the real rule is that the closer your screen’s brightness is to the room’s, the less tiring it is.

  • Dark room, night—go dark. A bright screen dazzles, and your pupils stay clamped shut
  • Bright room, daytime by a window—go light. With bright surroundings, text on a dark screen sinks and gets hard to read

In other words the right answer changes with the time of day, so having both is the practical move. Install one theme that bundles a dark and a light variant, like GitHub Theme, and Ctrl+K→Ctrl+T is all you need to go between them.

Three settings beyond the theme that help readability

If your eyes still tire after changing the colours, the cause may not be the theme but the text itself. Search for these in the settings (gear icon → Settings).

  • Font size—the default sits around 12–14. Just raising it to 15 or 16 noticeably cuts how often you squint
  • Line height—0 means automatic. Enter something like 1.6 and the extra breathing room stops you losing your place in long files
  • Font family—switching to a monospace font where 0 and O, 1 and l are easy to tell apart makes hunting for typos much easier
TipsRecommended fonts for codingHow to choose a coding font where 0 and O are easy to tell apart

Summary

  1. A theme is one kind of extension. Once installed, switch instantly with Ctrl+K→Ctrl+T (on Mac, Cmd+K→Cmd+T)
  2. When in doubt, start with the staple One Dark Pro; if you prefer a bright screen, GitHub Theme
  3. If you don’t like it, change it as many times as you want. Just try it out casually first
  4. Choose dark or light by the room’s brightness, not taste—or let it follow your OS automatically
  5. If your eyes still tire, look at font size, line height, and the font, not the colours

Because it’s the screen you look at every day, finding a color that clicks with you makes the very time you spend writing code comfortable.

FAQ

Are VSCode themes free?
Everything introduced here is a free extension. Paid themes barely exist, so it's fine to try as many as you like.
Does changing the theme change the contents of saved files?
It doesn't. A theme is a setting that changes only the screen's appearance (color scheme); it has no effect whatsoever on file contents. It's safe no matter how many times you switch.
If my company or team has a designated theme, can I change just my own appearance?
You can. A color theme is a personal VSCode setting, so it doesn't affect other people's screens or files under Git management. You alone can work in whatever color scheme you like.

Popular tips