Best VSCode Theme of 2021

Shades of Purple VSCode theme is featured as a best VSCode theme of 2021.

P.S Check out my VSCode.pro and NodeCLI.com professional courses.

I have been using Sublime for over ten years, but last year, as a full-time open source developer — I got inspired by the new open source editor called VSCode or Visual Studio Code.

Fast forward one year and I am an avid power user of VSCode. I fell in love with how easy it is to improve VSCode and make it better for everyone.

VSCode community has empowered me enough to do the following things which I am super proud of:

🔥 Become a VSCode Power User!

And yes, that’s what you’re here for. So, pardon my clickbaity title for a shameless plug — I did, however, put a lot of work into making this Shades of Purple theme perfect.

🦄 Shades of Purple VSCode Theme →

Shades of Purple is a professionally crafted VSCode theme which I built by hand-picking a bunch of shades of purple that look good and feel easy on our eyes. You’re supposed to 💜 these bold shades of purple.

Got this theme reviewed by several designers and that has led to ~70 new releases of this theme and 1,017,632+ developers are using it daily.

See how truly amazing the shades of purple syntax looks and feels. Click the image to download 🦄 Shades of Purple →

Video Demo & Installation

Watch the following video on YouTube to find out more about Shades of Purple theme. Learn how to install it and a little bit about its features like markdown editing — which is quite pretty awesome with SOP.

👋 This video is part of my VSCode.pro course!

Easy Installation

  1. Open the extensions sidebar on Visual Studio Code
  2. Search for Shades of Purple Theme
  3. Click Install to install it.
  4. Click Reload to reload your editor.
  5. Code/File > Preferences > Color Theme > Shades of Purple.

Alternate Installation

  1. Launch Quick-Open using Cmd+P — or — Ctrl+P.
  2. Paste the command ext install shades-of-purple
  3. Click Install to install it.
  4. Click Reload to reload your editor.
  5. Code/File > Preferences > Color Theme > Shades of Purple.

Best Custom Settings

This theme works best with the following settings. Especially if you have the Operator mono font. Add it to your user settings JSON object. You can also use a custom VSCode Shades-of-Purple icon that I created based on the work of VSCode Icons.

// Theme Setup.
"workbench.colorTheme": "Shades of Purple",
"workbench.iconTheme": "vscode-icons",
"editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",
"terminal.integrated.fontFamily": "'Operator Mono', 'Inconsolata for Powerline', monospace",
"editor.fontSize": 17,
"editor.lineHeight": 24.65,
"editor.letterSpacing": 0.5,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
"editor.cursorStyle": "line",
"editor.cursorWidth": 5,
"editor.cursorBlinking": "solid",
"editor.renderWhitespace": "all",
"editor.snippetSuggestions": "top",
"workbench.startupEditor": "newUntitledFile",
"editor.glyphMargin": true,
"workbench.editor.enablePreview": false,
"explorer.confirmDragAndDrop": false,
"files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true,
// Formatting Optional.
"editor.formatOnSave": true,
"prettier.eslintIntegration": true,
"eslint.run": "onType",
"eslint.autoFixOnSave": true,
// MacOS Only Settings.
"workbench.fontAliasing": "auto",
"terminal.integrated.macOptionIsMeta": true,
"workbench.statusBar.feedback.visible": false,

🦄 I’m teaching more about configuring this theme and your Visual Studio Code editor at VSCode.pro. Interested?! Sign up to become a VSCode Power User

Screenshots:

🦄 Shades of Purple syntax for: Markdown

🦄 Shades of Purple syntax for: Markdown

🦄 Shades of Purple syntax for: JavaScript

🦄 Shades of Purple syntax for: JavaScript

🦄 Shades of Purple syntax for: PHP

🦄 Shades of Purple syntax for: PHP

🦄 Shades of Purple syntax for: HTML

🦄 Shades of Purple syntax for: HTML

🦄 Shades of Purple syntax for: Pug

🦄 Shades of Purple syntax for: Pug

🦄 Shades of Purple syntax for: Python

🦄 Shades of Purple syntax for: Python

🦄 Shades of Purple syntax for: Go

🦄 Shades of Purple syntax for: Go

Put Shades of Purple In Other Places!

I have built other Shades of Purple themes for different software.

Here's a list.

Hello, we’re the Dev Couple!

I (Ahmad Awais) am a Full Stack Web Developer and a regular core contributor at WordPress. My significant other (Maedah Batool) is a Technical Project Manager, and she’s also a WordPress Core Contributor. Together with our team, we run the WPCouple.com.

Learn to become a VSCode Power User →

As I mentioned earlier, I am helping people make the most out of their editor experience. I am doing so by building a course to make you a VSCode Power user. The course literally has the most context-specific domain VSCode.pro — see what I did there?!

🔥 Become a VSCode Power User!

Support our Open Source Projects! 🎩

If you’d like us to keep producing professional free and open source software (FOSS). Consider paying for an hour of my dev-time. We’ll spend two hours on open source for each contribution. Yeah, that’s right, you pay for one hour and get both of us to spend an hour as a thank you.

Project Backers & TheDevCouple Partners ⚡️

This FOSS (free and open source software) project is updated and maintained with the help of awesome businesses listed below. Without the support from these amazing companies/individuals, this project would not have been possible. What/How? Read more about it →

License & Attribution

Licensed as MIT ⓒ Ahmad Awais.

Thanks to VSCode team at Microsoft for creating such an awesome code editor. Also to the creator of other high contrast themes that served as an inspiration. This theme takes inspiration from many VSCode themes including but not limited to Cobalt themes by Roberto Achar, Ayu, Palenight themes, Dracula themes, etc. VSCode and Icons8 for the icons in this readme.

Say 👋 on Twitter, let’s be friends there @MrAhmadAwais →

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmad Awais ⚡️

Award-winning DevRel Eng. ❯ NodeCLI.comVSCode.pro ❯ Google Developers Expert ❯ Node.js Community Committee ❯ WordPress Core ❯ Self-confessed tech comedian!