M4RKYU.SYSEdition 2027
Skip to content
LOCEN/Ontario · CA/▸logs · top 10 must try vs code themes in 2024 2efjStandbyOK/--:--:--EST
M4M4RK_YUportfolio
  • BuildBuild
    BuildOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • GalleryGallery
    GalleryOverview
    • PhotosPhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • WritingWriting
    WritingOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • ResourcesResources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • AboutAbout
  • ContactContact
中文

syndicated · dev.to / @markyu

VS Code Themes I Can Actually Code In for 8 Hours

A practical 2026 refresh of VS Code themes, focused on readability, contrast, fatigue, and real daily developer use.

Published
May 4 '24
·
Reading time
4 min read
·
Reactions
28
·
Comments
3
vscodeproductivitywebdevtooling
View on dev.toDiscuss

On this page

  • My Theme Test
  • 1. GitHub Theme
  • 2. One Dark Pro
  • 3. Night Owl
  • 4. Dracula Official
  • 5. Ayu Mirage
  • 6. Noctis
  • 7. Moonlight
  • 8. 2077
  • 9. Material Theme
  • 10. Catppuccin
  • My Practical Ranking
  • What I Would Avoid
  • Final Thought

I stopped picking VS Code themes by screenshots.

A theme can look beautiful for five minutes and still become painful after a full day of reading logs, reviewing diffs, and jumping between TypeScript, Markdown, JSON, and terminal output.

So this list is not "the prettiest themes." It is my practical filter for themes I can actually code in for 8 hours.

My Theme Test

Before keeping a theme, I check four things:

CheckWhy I care
Diff readabilityCode review is where bad colors hurt fast.
Markdown contrastI write docs and blog drafts in the editor.
Terminal visibilitySome themes forget the integrated terminal exists.
Low-light fatigueA theme that looks cool at midnight can still punish your eyes.

My quick test file usually includes:

type ThemeTest = {
  status: "draft" | "review" | "published";
  count: number;
  tags?: string[];
};

export function formatTitle(input: string) {
  if (!input.trim()) throw new Error("Missing title");
  return input.trim().replace(/\s+/g, " ");
}

Then I open a Git diff, a Markdown post, and a terminal. If one of those feels bad, the theme is out.

1. GitHub Theme

This is still my safest recommendation.

It has dark, light, dimmed, and high-contrast variants, so you can use one family across different lighting conditions.

I like it because it does not try too hard. The colors are predictable, and the diff view stays readable.

Best for:

  • backend work
  • docs
  • code review
  • teams that switch between light and dark mode

My take: if you do not want to think about themes, start here.

2. One Dark Pro

One Dark Pro is popular for a reason. It has a polished dark palette and works well with many languages.

The downside is that some variants can feel too soft when you are scanning large files. If your monitor is not great, muted contrast becomes annoying.

Best for:

  • JavaScript/TypeScript
  • frontend projects
  • developers who like dark themes but not aggressive neon

My take: good default, but test it in diff view before committing.

3. Night Owl

Night Owl is one of the better themes for late-night coding.

The palette is calm without making everything gray. I especially like it for React and Markdown because headings, strings, and JSX are easy to separate.

Best for:

  • night work
  • React
  • docs-heavy repositories

My take: strong choice if Dracula feels too loud.

4. Dracula Official

Dracula is bold. Some people love that. Some people get tired of it quickly.

I would not use it for every project, but it works well when you want strong syntax separation and a little visual energy.

Best for:

  • short coding sessions
  • demos
  • streams
  • people who like high contrast

My take: good taste is not the same as low fatigue. Try it for a full day.

5. Ayu Mirage

Ayu Mirage is the version I would pick from the Ayu family.

It feels softer than many dark themes but still keeps enough contrast for real work. The light version is not my favorite; Mirage is the useful one for me.

Best for:

  • long writing/coding sessions
  • web projects
  • developers who prefer warm dark palettes

My take: understated and practical.

6. Noctis

Noctis is useful because it gives you many variants, including good light options.

I like it when I need a theme that does not look like every other dark editor screenshot. Some variants are better than others, so do not install it and stop at the first one.

Best for:

  • developers who switch palettes often
  • light theme users
  • accessibility testing

My take: treat it like a theme toolkit, not one theme.

7. Moonlight

Moonlight is calm and stylish. I like it for writing, Markdown, and frontend code.

It may not be the best theme for dense backend debugging where you want maximum contrast, but it is pleasant for building UI and reading code.

Best for:

  • frontend work
  • side projects
  • prose and Markdown

My take: nice when you want focus without the editor shouting at you.

8. 2077

2077 looks cool. That is both the reason to try it and the reason to be careful.

Neon themes are fun, but I rarely keep them as daily drivers. They work better for screenshots, demos, and short sessions.

Best for:

  • visual demos
  • short creative sessions
  • personal projects

My take: great vibe, not always great ergonomics.

9. Material Theme

Material Theme remains a strong all-rounder because the variants are mature and predictable.

If you work across several languages, this matters more than people think. A theme that handles TypeScript well but makes YAML unreadable is not a daily-driver theme.

Best for:

  • polyglot repos
  • web apps
  • teams that want familiar colors

My take: not exciting, but productive.

10. Catppuccin

Catppuccin has become one of my favorite choices for 2026-style dev setups because it feels modern without being chaotic.

The variants give you enough room to tune mood and contrast, and it works nicely across terminals, editors, and many CLI tools.

Best for:

  • full desktop theming
  • long sessions
  • developers who want a softer modern palette

My take: this is the one I would add to the older 2024 list.

My Practical Ranking

Use caseTheme I would pick
Safest defaultGitHub Theme
Night codingNight Owl
Soft modern setupCatppuccin
Strong dark classicOne Dark Pro
Light theme workflowGitHub Light or Noctis
Screenshots/demos2077 or Dracula

What I Would Avoid

I would not install 20 themes and keep switching every hour. That usually feels productive but is just visual procrastination.

Pick one daily driver, one light fallback, and maybe one demo theme. That is enough.

Also: test your theme with your actual work. If you write Java, open Java. If you write Kubernetes YAML, open YAML. Theme screenshots lie.

Final Thought

A good theme should disappear while you work. If you keep noticing the colors, it may be a beautiful theme but a bad tool.

What VS Code theme have you used for months without getting tired of it?

Related reading

Next.js Images Without CLS: My LQIP Blur-Up Setup

A practical Next.js image optimization guide for zero CLS layouts, blur placeholders, dimensions, remote images, and production image hygiene.

nextjs

JavaScript Memory Leaks Usually Start With One Reference

A practical JavaScript memory guide covering stack, heap, garbage collection, closures, event listeners, timers, and leak debugging.

javascript

CSS 3D Transform Bugs Usually Come From Perspective

A practical CSS 3D transform guide explaining perspective, rotateX, rotateY, transform-style, backface visibility, and debugging layout.

css

originally published

This post first ran on dev.to. Comments and reactions live there.

Continue on dev.to
PreviousKubernetes Is Useful, but Only After These Basics HurtA practical Kubernetes guide for developers: pods, deployments, services, config, scaling, and when not to introduce Kubernetes too early.
Back to all posts
NextReact Three Fiber: Build a 3D Scene Without Fighting ReactA code-first React Three Fiber setup with lighting, controls, materials, and the mistakes that make your first scene render black.
Back to archive
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation
open channel

say hi anytime · 2026

--:--:--ESTOntario, Canada
  • Email
  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat

Newsletter

Get the occasional dispatch

Notes and logs from m4rkyu.com — short, dated, no noise. Unsubscribe anytime.

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
  • Logs

Resources

Daily-use tools and a personal link library.

  • Search
  • Latest
  • Tools
  • Links
  • Notes
  • Topics
  • Shop
RSSJSON feed

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Changelog
  • Colophon
  • Resumepending

Socials

Find me on the usual feeds.

  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
  • Email
© 2026 ZhenXiao Mark Yumarkyu0615@gmail.com
  • Email
  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
PrivacyTermsBuilt with Next.js 16 · React 19 · Tailwind 4