Why I created the "DevFoundry Umber" Theme for VS Code (and why you should try it)

#vscode #themes #coding #webdev

Hey! 👋

Today I want to share the story behind creating my VS Code theme — DevFoundry Umber. This isn't just another dark theme; it's a theme born from an unexpected source of inspiration and the desire to create the perfect coding environment.

How it all started

It all began on an ordinary workday. As usual, I opened Chrome DevTools to inspect some element on a page. Then a thought stopped me: "Wow, these colors are beautiful!" That warm, earthy palette of Chrome's developer tools... It was incredibly cozy and pleasant to the eyes.

I realized I wanted the same feeling of "home" in my VS Code. I went through dozens of popular themes — One Dark, Dracula, Night Owl... All of them are cool, but none gave that same feeling of warmth and comfort as the developer tools panel.

The creation process

So I decided to create my own theme. I took the Chrome DevTools color palette as a foundation and started experimenting:

Main background — deep earthy #1B1713, like freshly tilled soil
Text — soft cream #E8DCCB that doesn't strain the eyes
Accents — warm orange #FFB86E (yes, I know it reminds of One Dark, but it plays completely differently here!)

The most interesting part began when I got to syntax highlighting. I wanted every code element to have its logical place in this warm palette.

Key features of devFoundry umber

Here's what makes this theme special:

1. Perfect contrast balance

No burned eyes from overly bright colors
But no fatigue from too dull shades either

2. Thoughtful syntax highlighting

Functions glow with a gentle blue #61AFEF
Strings have a pleasant green #98C379
Keywords — warm yellow-orange #D19A66
Classes and types — soft yellow #E5C07B

3. Smart bracket handling
Remember how sometimes you get lost in nested functions? I created special highlighting for each bracket pair — now you always see what opens and closes where.

4. Eye care
Working on projects at night, I noticed that warm earthy tones are much less tiring for the eyes than cool blue themes. The entire palette is designed to minimize strain during long coding sessions.

Who is this theme for?

Backend developers — will appreciate clear data type separation
Frontend developers — will enjoy well-thought-out JSX/TSX and CSS highlighting
Data Scientists — will like Python syntax handling
Everyone who values comfort — the theme works equally well day and night.

Technical highlights

I paid a lot of attention to details:

Configured semantic highlighting for better code understanding
Created separate styles for popular frameworks (Vue, React)
Added support for Docker, GraphQL, tests
Customized Git decoration colors

How to install

The theme is now available on the VS Code Marketplace! You can install it directly from VS Code or using this link:

[https://marketplace.visualstudio.com/items?itemName=ovcharovcoder.devfoundry-umber]

Just search for "DevFoundry Umber" in the Extensions panel (Ctrl+Shift+X) or click the link above to install.

Try it out

If you're like me, searching for that perfect "cozy" theme for daily work — give DevFoundry Umber a try. Maybe it's exactly what you've been looking for.

What themes do you use? Have you ever been inspired to create something of your own from small things like DevTools colors? Share in the comments!

P.S. If you like the theme, please leave a review on the Marketplace — it helps a lot! And if you have any suggestions for improvements, I'd love to hear them. 🔥