<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Hazeq Bin Mohsin</title>
    <description>The latest articles on DEV Community by Hazeq Bin Mohsin (@hazeqbinmohsin).</description>
    <link>https://dev.to/hazeqbinmohsin</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3999119%2F93704b33-c6ff-4bc2-9505-8fc78de7985f.png</url>
      <title>DEV Community: Hazeq Bin Mohsin</title>
      <link>https://dev.to/hazeqbinmohsin</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hazeqbinmohsin"/>
    <language>en</language>
    <item>
      <title>I Couldn't Find a VS Code Theme That Felt Right — So I Built One Myself..</title>
      <dc:creator>Hazeq Bin Mohsin</dc:creator>
      <pubDate>Tue, 23 Jun 2026 17:17:06 +0000</pubDate>
      <link>https://dev.to/hazeqbinmohsin/i-couldnt-find-a-vs-code-theme-that-felt-right-so-i-built-one-myself-2m6n</link>
      <guid>https://dev.to/hazeqbinmohsin/i-couldnt-find-a-vs-code-theme-that-felt-right-so-i-built-one-myself-2m6n</guid>
      <description>&lt;p&gt;Most themes force a choice: vibrant and tiring, beautiful and unfunctional, or readable and dull.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;So I stopped looking. I opened Adobe Illustrator and started building.&lt;/p&gt;

&lt;p&gt;The first version was called &lt;strong&gt;Syntax Shine&lt;/strong&gt; — 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: &lt;em&gt;if this helped me this much, it could help others too.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I expanded it into a full icon theme, published it as &lt;strong&gt;VS Seti Plus&lt;/strong&gt;, 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.&lt;/p&gt;

&lt;p&gt;So I rebuilt the brand from the ground up. It's now called &lt;strong&gt;Spect&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fusf5ud98y29weei1ay92.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fusf5ud98y29weei1ay92.png" alt="Editor Mockup | Spect (Dark Classic)" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  What Spect Actually Is
&lt;/h1&gt;

&lt;p&gt;Spect is a &lt;strong&gt;complete visual system for VS Code&lt;/strong&gt; — 250+ original icons and 7 color themes, all free.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pixel-Perfect Icons
&lt;/h2&gt;

&lt;p&gt;Every icon is &lt;strong&gt;hand-crafted&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7zaratho7rvk72sml6hg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7zaratho7rvk72sml6hg.png" alt="Sample Icons" width="798" height="172"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Color Themes That Work
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Feditor-preview.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Feditor-preview.png" alt="Color theme variants" width="799" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Spect has seven theme variants, not just one dark theme:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Theme&lt;/th&gt;
&lt;th&gt;Best for&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Dark Classic&lt;/td&gt;
&lt;td&gt;All‑purpose. Warm copper strings, soft gold functions, deep blacks.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark Professional&lt;/td&gt;
&lt;td&gt;My own choice — deeper backgrounds, brighter foregrounds.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark Contrast&lt;/td&gt;
&lt;td&gt;Daylight work. Elevated contrast and bright borders.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark Colorblind&lt;/td&gt;
&lt;td&gt;Maximum luminance contrast. Fiery bright text on the darkest backgrounds.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Light Classic Clean whitespace, bright token colors.&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Light Professional&lt;/td&gt;
&lt;td&gt;High accessibility with deep token colors for long work.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Light Colorblind&lt;/td&gt;
&lt;td&gt;Maximum readability on a bright white background.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

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

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Fwidgets-preview.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Fwidgets-preview.png" alt="Translucent Widgets" width="800" height="337"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;I never intended to build a product. I just wanted my own workspace to feel comfortable.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to Try It
&lt;/h2&gt;

&lt;p&gt;Just search for &lt;strong&gt;"Spect"&lt;/strong&gt; in the VS Code Extensions panel. That's it. Install the first result you find there.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=HazeqBinMohsin.spect-ui" rel="noopener noreferrer"&gt;Link to the marketplace&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;I'm actively maintaining Spect. The last update added &lt;strong&gt;40+ new icons&lt;/strong&gt; (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.&lt;/p&gt;

&lt;p&gt;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 — &lt;a href="https://github.com/HazeqBinMohsin/spect-ui/issues/new" rel="noopener noreferrer"&gt;open an issue&lt;/a&gt;. I actually read them and fix things fast.&lt;/p&gt;




&lt;p&gt;Also, keep in mind that this is not an advertisement, but a personal project I made for myself.&lt;br&gt;
&lt;strong&gt;Happy coding.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>design</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
