Congratulations!

Congratulations!

You've unlocked the about me and contact me pages!

Trophy Icon

Unlock Additional Pages:

Key Icon 1
Unlock Locked Icon

VS Code Theme: Code Distinction

Tech Used: JSON

Like many developers using Visual Studio Code, I’ve tried dozens of color themes. There are so many great themes available, but I was unable to find one that visually distinguished the programming languages by color.

It seemed to me like an obvious choice as a frontend developer, to make a color theme that made each language a different color for easy recognition when they interact with each other.

So this theme is compatible only with the languages that I regularly work with as of this writing in July of 2024: PHP, Javascript, HTML, and CSS.

Javascript (Orange) and PHP (Purple) easily seen in the file.

Each language is assigned a unique color theme:

  • PHP: Purple and Pink
  • Javascript: Orange and Yellow
  • HTML: Blue
  • CSS (Classes and IDs): Green

Before: Visual Studio Dark theme

After: Code Distinction, each language visually distinct

The colors were chosen in part based upon the branding associated with the related languages. Javascript for example has a logo and color scheme that is either yellow or orange. PHP is presented with a color scheme that is purplish blue and purple. HTML is often presented as Orange and CSS as Blue, but light Blue and Green were chosen to give them a more structural and less dynamic looking feel.

It was common for me to change color themes frequently before making and switching to Code Distinction. I now use Code Distinction daily and I’m very happy using it.