Bold New VSCode Theme — Shades of Purple 💜🦄⚛
Tags: vscode, code, visualstudio, visualstudiocode
Published: 2018-04-11 16:02:10

---
title: Bold New VSCode Theme — Shades of Purple 💜🦄⚛
published: true
description: Professional VSCode theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style.
tags: vscode, code, visual studio, visual studio code
---



![shades of purple](https://thepracticaldev.s3.amazonaws.com/i/0tuv1vf7ql1r9asxqxj8.gif)

## [Shades of Purple Theme for VS Code](http://Ahmda.ws/VSCSOP)


💜 I'm super excited to launch my new purple Visual Studio Code theme called → [Shades of Purple](http://Ahmda.ws/VSCSOP) (SOP) — it includes hand-picked & bold shades of purple 🦄 coz purple can be genius.

{#twitter 983398087711485953 %}


### Stats in One Week:

👉 Download [Shades of Purple](http://Ahmda.ws/VSCSOP)
🎩 Used by ~500+ developers (launched 2 days ago)
🌟 18+ five-star ratings 
💥 VSCode Tip: http://VSCode.pro/tip/1 
✅ Also available for Slack / #iTerm2 / #Hyper / Konsole / AlfredApp





<table width='100%' align="center">
    <tr>
        <td align='left' width='100%' colspan='2'>
            <strong><code>Shades of Purple (SOP)</code></strong><br />
            A professional theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style. I am also launching a course on VSCode to help you become a <a href="https://VSCode.pro/" target="_blank">Visual Studio Code Power User →</a>
        </td>
    </tr>
    <tr>
        <td>
            A FOSS (Free & Open Source Software) project developed by <a href='https://github.com/ahmadawais'  target="_blank">Ahmad Awais</a>.
        </td>
        
    </tr>
    <tr><td><sup> Follow Ahmad's #FOSS work on GitHub <a href='https://github.com/ahmadawais'>@AhmadAwais</a> —   Say 👋 on Twitter <a href="https://twitter.com/mrahmadawais/">@MrAhmadAwais</a></sup></td></tr>
</table>

  

[![Version](https://vsmarketplacebadge.apphb.com/version/ahmadawais.shades-of-purple.svg?label=Shades%20of%20Purple&colorB=4d21fc)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)  | [![Installs](https://img.shields.io/vscode-marketplace/d/ahmadawais.shades-of-purple.svg?label=Developers&colorB=b362ff)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) | [![Rating](https://img.shields.io/vscode-marketplace/r/ahmadawais.shades-of-purple.svg?label=Ratings&colorB=A599E9)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple#review-details)
--- | --- | ---
[![GitHub stars](https://img.shields.io/github/stars/ahmadawais/shades-of-purple-vscode.svg?style=social&label=Stars)](https://github.com/ahmadawais/shades-of-purple-vscode/stargazers) | [![GitHub followers](https://img.shields.io/github/followers/ahmadawais.svg?style=social&label=Follow)](https://github.com/ahmadawais?tab=followers) | [![Tweet for help](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Tweet%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/)


<br>

![Install](https://on.ahmda.ws/qWVC/c)

## Easy Installation

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

<br>

![alternate installation](https://on.ahmda.ws/qWuq/c)

## Alternate Installation

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

<br>

![Tips](https://on.ahmda.ws/qVjy/c)

## 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](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/logo.png) that I created based on the work of amazing designer Dhanish called [VSCode Icons](https://github.com/dhanishgajjar/vscode-icons#how-to-install)._


```js

// 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'll be teaching more about configuring this theme and your Visual Studio Code editor at [VSCode.pro](https://VSCode.pro/). Interested?! Sign up to become a [VSCode Power User](https://VSCode.pro/) →_


<br>

![Shades of purple for other software](https://on.ahmda.ws/qYAe/c)

## Put `Shades of Purple` In Other Places!

I have built other `Shades of Purple` themes for different software. Here's a list.

- 💜 [VSCode theme](https://github.com/ahmadawais/shades-of-purple-vscode) — Shades of Purple
- 💜 [iTerm2 theme](https://github.com/ahmadawais/shades-of-purple-iterm2) — Shades of Purple
- 💜 [Hyper™ theme](https://github.com/ahmadawais/shades-of-purple-hyper) — Shades of Purple
- 💜 [Konsole theme](https://github.com/ahmadawais/shades-of-purple-konsole) — Shades of Purple
- 💜 [Slack theme](https://github.com/ahmadawais/shades-of-purple-slack) — Shades of Purple
- 💜 [Alfred theme](https://github.com/ahmadawais/shades-of-purple-alfred) — Shades of Purple

<br>

![Hello](https://on.ahmda.ws/os6O/c)

#### **Hello, we're the [WordPress Couple](https://WPCouple.com)**!


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

If you'd like to get insights into our love for open source software, professional full stack development, WordPress community, the growth of JavaScript or growing a family, building, and bootstrapping a business, then subscribe to our premium newsletter called ↣ [The WordPress Takeaway](https://WPTakeaway.club)!


#### [**Support our Open Source Projects!**](https://pay.paddle.com/checkout/515568) 🎩


If you'd like us to keep producing professional free and open source software (FOSS). Consider [paying for an hour of my dev-time](https://pay.paddle.com/checkout/515568). 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.


<br>

![Thanks](https://on.ahmda.ws/orkW/c)

## License & Attribution

**Licensed** as MIT ⓒ [Ahmad Awais](https://AhmadAwais.com/).

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. Thanks, Dhanish for awesome VSCode icons. And Icons8 for the icons in this readme.

_Say 👋 on Twitter → [@MrAhmadAwais](https://twitter.com/mrahmadawais/)_