DEV Community

Hazeq Bin Mohsin
Hazeq Bin Mohsin

Posted on

I Couldn't Find a VS Code Theme That Felt Right — So I Built One Myself..

Most themes force a choice: vibrant and tiring, beautiful and unfunctional, or readable and dull.

The default icon theme was boring, the icons were not recognizable much at small scale. The color theme missed good syntax highlighting and blender background colors.

I went through Ayu, One Dark Pro, Monokai Pro, and dozens of others. Every one of them fell short. The icons had gaps. The syntax highlighting wasn't deep enough. The colors either burned my eyes or made everything look blender and lifeless. After ten hours of coding, I'd just feel exhausted.

So I stopped looking. I opened Adobe Illustrator and started building.

The first version was called Syntax Shine — it was just a personal syntax theme. I tweaked every token color until I could stare at a complex React component at 2 a.m. and still read it clearly. The improvement was immediate. That's when it clicked: if this helped me this much, it could help others too.

I expanded it into a full icon theme, published it as VS Seti Plus, and it somehow got 300+ installs and two 5-star reviews. But the name confused people, especially AI — most assumed it was based on the built‑in Seti icons. It wasn't. Every icon was designed from scratch.

So I rebuilt the brand from the ground up. It's now called Spect.

Editor Mockup | Spect (Dark Classic)


What Spect Actually Is

Spect is a complete visual system for VS Code — 250+ original icons and 7 color themes, all free.

Pixel-Perfect Icons

Every icon is hand-crafted in Adobe Illustrator and uses exactly one color from an 8‑color functional palette (Red, Orange, Yellow, Green, Blue, Purple, Gray, White). These are clean, scannable shapes that stay recognizable even when your sidebar is collapsed to 4 pixels wide.

Sample Icons

Most icon packs assign the same symbol to similar file types. Spect doesn't. JS, MJS, CJS, and OJS each get their own icon. JSX and TSX are visually distinct. HTML, HTM, and XML are clearly separated. Python scripts and modules are different. Those small distinctions matter when you're navigating a massive codebase at speed.

Color Themes That Work

Color theme variants

Spect has seven theme variants, not just one dark theme:

Theme Best for
Dark Classic All‑purpose. Warm copper strings, soft gold functions, deep blacks.
Dark Professional My own choice — deeper backgrounds, brighter foregrounds.
Dark Contrast Daylight work. Elevated contrast and bright borders.
Dark Colorblind Maximum luminance contrast. Fiery bright text on the darkest backgrounds.
Light Classic Clean whitespace, bright token colors.
Light Professional High accessibility with deep token colors for long work.
Light Colorblind Maximum readability on a bright white background.

Every theme has 40+ syntax token rules — strings, regex, keywords, functions, variables, types, numbers, HTML/XML, CSS, Markdown, JSON, diffs, and more. Nothing gets left unstyled.

The command palette, autocomplete suggestions, and hovers float with subtle translucency. You can even see the code behind them. It's one of the specialties of Spect — And it just feels more premium and beautiful.

Translucent Widgets


I never intended to build a product. I just wanted my own workspace to feel comfortable.

But when I published it as VS Seti Plus, something happened: developers started loving it, and it got 2 reviews, each featuring a 5-star gift, in under 50 downloads.

That feedback keeps me going. Every icon, every token color, every contrast ratio is there because I personally needed it during a long coding session.


How to Try It

Just search for "Spect" in the VS Code Extensions panel. That's it. Install the first result you find there.

Link to the marketplace


What's Next

I'm actively maintaining Spect. The last update added 40+ new icons (CoffeeScript, F#, Zig, Nix, Elixir, Haskell, and more) and two new light themes. There's a colorblind‑specific variant for both dark and light modes, because accessibility shouldn't be an afterthought.

If you try Spect and something feels off — a missing icon, a color that doesn't work for you, a language that isn't covered — open an issue. I actually read them and fix things fast.


Also, keep in mind that this is not an advertisement, but a personal project I made for myself.
Happy coding.

Top comments (0)