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

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

Source: Dev.to

How it all started ## The creation process ## Key features of devFoundry umber ## Who is this theme for? ## Technical highlights ## How to install ## Try it out 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. 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. So I decided to create my own theme. I took the Chrome DevTools color palette as a foundation and started experimenting: 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. Here's what makes this theme special: 1. Perfect contrast balance 2. Thoughtful syntax highlighting 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. I paid a lot of attention to details: 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. 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. 🔥 Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - 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!) - No burned eyes from overly bright colors - But no fatigue from too dull shades either - Functions glow with a gentle blue #61AFEF - Strings have a pleasant green #98C379 - Keywords — warm yellow-orange #D19A66 - Classes and types — soft yellow #E5C07B - 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. - 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