A good theme isn’t just a color palette — it’s a tool to protect your focus, reduce fatigue, and make your editor feel like home.
🧪 Why build a theme?
I’ve always enjoyed fine-tuning my development environment — from terminal fonts to keyboard shortcuts. But I could never quite settle on a theme that felt truly coherent, balanced, and comfortable for long hours of work.
So I decided to try something: build my own Visual Studio Code theme.
Not as a designer, but as a developer — out of curiosity, to learn, and to see how much impact a well-crafted theme could really have.
🌙 Dark, soft, and focused — that’s Harmonia
From the start, Harmonia had a clear goal: to be a dark, soft, visually consistent theme, especially tailored for web developers.
I focused on the languages and file types I use the most: PHP, JavaScript (and friends like TypeScript and JSX), JSON, config files, Docker, Apache, Nginx, and log files.
The idea was to highlight what matters without visual noise. A theme that feels calm and lets your code breathe.
🖌️ The color decisions
Instead of choosing flashy or high-contrast colors, I took a more subtle approach:
• Soft yet deep background: dark enough to reduce eye strain, but not harsh black.
• Readable, rich foreground: avoiding pure white or washed-out grays.
• Syntax colors with character — not chaos: strong enough to be useful, but not overwhelming.
Each color was tested and adjusted to feel consistent across different languages and syntaxes, without breaking the harmony of the overall palette.
👁️ Why colors matter
We spend countless hours looking at our editors. A bad theme can be a constant source of visual fatigue, even if you don’t realize it.
A well-balanced color scheme can help you:
• stay focused longer
• avoid headaches or eye strain
• actually enjoy the experience of coding a bit more
In my opinion, a theme is part of developer ergonomics. Just like a good chair or a calibrated monitor. You don’t notice the value — until you use one that’s actually well made.
🧠 What I learned along the way
Creating a theme is more technical than it might seem. I learned:
• how VS Code token scopes work
• how to group styles across languages and file types
• how to test palettes while keeping consistency
• how to package and publish to the VS Code Marketplace
• how to generate proper previews for other users to see what you see
It wasn’t hard — but it was detail-heavy.
And that made it fun.
⚠️ About updates
I work full-time, so updates may not come frequently — but I’ll continue improving Harmonia little by little, especially around the languages and tools I use most in web development.
That includes PHP, JS/TS, JSON, configs, Dockerfiles, and log files.
If time allows, I’d love to expand support for other languages and improve the theme’s scope coverage even more.
📦 Where to find it
Harmonia Theme is available now on the Visual Studio Code Marketplace.
🔗 Direct link to the extension
📸 Screenshots and changelog on GitHub
🙌 Thanks for reading
This was a small side project — but one that brought me a lot of satisfaction.
If it helps even one more developer feel a bit more comfortable during a long coding session, it was totally worth it.
And if you try it — I’d love to hear what you think.
Cover image credit: Pankaj Patel, via Unsplash
