<div align="left"><p><a href="https://VSCode.pro/?utm_source=sop"><img alt="New in the Shades of Purple Theme" align="center" src="https://img.shields.io/badge/%F0%9F%A6%84-Learn%20VSCode%20%E2%86%92-gray.svg?colorA=5734F5&colorB=5734F5&style=flat" /></a>&nbsp; <strong>NEW:</strong>
Improved Markdown list syntax colors.
</p></div>

<div align="center">
<a align="center" href="https://VSCode.pro/?utm_source=sop"><img align="center" src="https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/1_sop.gif" /></a>

# Shades of Purple Theme for VS Code

[![Version](https://vsmarketplacebadge.apphb.com/version/ahmadawais.shades-of-purple.svg?subject=Shades%20of%20Purple&colorA=2D2A56&colorB=4D2AFF)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)
[![Developers Using Shades of Purple](https://vsmarketplacebadge.apphb.com/installs/ahmadawais.shades-of-purple.svg?subject=Developers&colorA=2D2A56&colorB=4D2AFF)](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&colorA=2D2A56&colorB=4D2AFF)](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple#review-details)
[![VSCode.pro](https://img.shields.io/badge/-VSCode.pro%20%E2%86%92-gray.svg?colorB=4D2AFF)](https://VSCode.pro/?utm_source=sop)

</div>

<br>

<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. One of the best and top rated VSCode Themes in the marketplace. Become a <a href="https://VSCode.pro/?utm_source=sop" 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>
        <td align='center'>
            <a  target="_blank" href='https://AhmadAwais.com/'>
                <img src='https://img.shields.io/badge/%E2%86%92-AHMAD%20AWAIS-gray.svg?colorA=2D2A56&colorB=4D2AFF&style=flat' width='100' />
            </a>
        </td>
    </tr>
    <tr><td><sup> Follow Ahmad's #FOSS work on GitHub <a href='https://github.com/ahmadawais'>@AhmadAwais</a> —   Say Hi on Twitter <a href="https://twitter.com/mrahmadawais/">@MrAhmadAwais</a></sup></td><td  align='center'> <a  target="_blank" href='https://AhmadAwais.com/'>👋 </a></td></tr>
</table>

<div align="center">

[![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/)

</div>

<br>

![Install](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/2_video_demo.png)

## 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 it's features like markdown editing — which's quite pretty awesome with SOP. _Shhh this video is part of [VSCode.pro course →](https://VSCode.pro/?utm_source=sop)_

<h4 align="center">
  <a href="https://www.youtube.com/watch?v=wZ1nzNCD-iM" target="_blank"><img src="https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/3_sop_vdo.jpeg" />

  📺  Watch the Video to Learn More → </a>
</h4>

<br>

![Install](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/4_install.png)

## 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**.
6. 🌟 [Rate five-stars](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple#review-details) like 60+ awesome devs to appreciate the effort behind this theme.

<br>

![alternate installation](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/5_alternate_installation.png)

## Alternate Installation

1. Launch Quick Open using <kbd>Cmd</kbd>+<kbd>P</kbd> — or — <kbd>Ctrl</kbd>+<kbd>P</kbd>.
2. Paste the command `ext install shades-of-purple`
3. Click **Install** to install it.
4. Click **Reload** to reload the your editor.
5. Code/File ＞ Preferences ＞ Color Theme ＞ **Shades of Purple**.
6. 🌟 [Rate five-stars](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple#review-details) like 55+ awesome devs to appreciate the effort on this theme.

<br>

![Tips](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/6_custom_settings.png)

## 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 [VSCode Icons](https://github.com/dhanishgajjar/vscode-icons#how-to-install)._

```json
// 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,
// SOP's highlight matching tag setting.
"highlight-matching-tag.styles": {
		"opening": {
			"full": {
				"custom": {
					"backgroundColor": "rgba(165, 153, 233, 0.1)"
				}
			},
			"left": {
				"custom": {
					"borderWidth": "0"
				}
			},
			"right": {
				"custom": {
					"borderWidth": "0"
				}
			}
		}
	},
// SOP's Import Cost Extension Settings.
"importCost.largePackageColor": "#EC3A37F5",
"importCost.mediumPackageColor": "#B362FF",
"importCost.smallPackageColor": "#B362FF"
```

🦄 _I'll be teaching more about configuring this theme and your Visual Studio Code editor at [VSCode.pro](https://VSCode.pro/?utm_source=sop). Interested?! Sign up to become a [VSCode Power User](https://VSCode.pro/?utm_source=sop) →_

<br>

![Shades of purple FAQs](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/7_faq.png)

## Frequently Asked Questions

- 👌 [Shades of Purple VSCode Theme With No Italics](https://github.com/ahmadawais/shades-of-purple-vscode/issues/13#issuecomment-416182574)
- 👌 [Matching styles for the “Highlight Matching Tag” extension?](https://github.com/ahmadawais/shades-of-purple-vscode/issues/20)
- 👌 [Can you share your VSCode Power User Setup?](https://VSCode.pro/?utm_source=sop)

<br>

![Screenshots](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/8_screenshots.png)

## Screenshots: Shades of Purple Theme
<div align="center">

![Markdown Syntax](https://img.shields.io/badge/SYNTAX-Markdown-gray.svg?colorB=5532F3)
![markdown](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/markdown.png)

<br>

![hr](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png)

<br>

![JavaScript Syntax](https://img.shields.io/badge/SYNTAX-JavaScript-gray.svg?colorB=5532F3)
![JavaScript](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/JavaScript.png)

<br>

![hr](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png)

<br>

![PHP Syntax](https://img.shields.io/badge/SYNTAX-PHP-gray.svg?colorB=5532F3)
![PHP](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/PHP.png)

<br>

![hr](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png)

<br>

![HTML Syntax](https://img.shields.io/badge/SYNTAX-HTML-gray.svg?colorB=5532F3)
![HTML](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/HTML.png)

<br>

![hr](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png)

<br>

![Pug Syntax](https://img.shields.io/badge/SYNTAX-Pug-gray.svg?colorB=5532F3)
![Pug](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/Pug.png)

<br>

![hr](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png)

<br>

![Python Syntax](https://img.shields.io/badge/SYNTAX-Python-gray.svg?colorB=5532F3)
![Python](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/Python.png)

<br>

![hr](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png)

<br>

![Go Syntax](https://img.shields.io/badge/SYNTAX-Go-gray.svg?colorB=5532F3)
![Go](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/Go.png)

</div>

<br>

![Shades of purple for other software](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/9_put_sop.png)

## 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
- 💜 [Cygwin theme](https://github.com/ahmadawais/Shades-of-Purple-Cygwin) — Shades of Purple

## SOP's Syntax Colors

Shades of purple theme is built with several shades of purple and a few contrast colors to make things pop. This also makes SOP a very good theme for teaching, presenting, and using on your site via Prisma or HighlightJS. A rough collection of important colors in SOP theme is listed below.

|      USAGE       |                                HEX CODES                                 |
| ---------------- | ------------------------------------------------------------------------ |
| Background       | ![#2D2B55](https://placehold.it/15/2D2B55/000000?text=+) `#2D2B55`       |
| Background Dark  | ![#1E1E3F](https://placehold.it/15/1E1E3F/000000?text=+) `#1E1E3F`       |
| Foreground       | ![#A599E9](https://placehold.it/15/A599E9/000000?text=+) `#A599E9`       |
| Hover Background | ![#4D21FC](https://placehold.it/15/4D21FC/000000?text=+) `#4D21FC`       |
| Contrast         | ![#FAD000](https://placehold.it/15/FAD000/000000?text=+) `#FAD000`       |
| Highlight        | ![#FF7200](https://placehold.it/15/FF7200/000000?text=+) `#FF7200`       |
| Comment          | ![#B362FF](https://placehold.it/15/B362FF/000000?text=+) `#B362FF`       |
| Constants        | ![#FF628C](https://placehold.it/15/FF628C/000000?text=+) `#FF628C`       |
| Keywords         | ![#FF9D00](https://placehold.it/15/FF9D00/000000?text=+) `#FF9D00`       |
| Other            | ![#9EFFFF](https://placehold.it/15/9EFFFF/000000?text=+) `#9EFFFF`       |
| Strings          | ![#A5FF90](https://placehold.it/15/A5FF90/000000?text=+) `#A5FF90`       |
| Templates        | ![#3AD900](https://placehold.it/15/3AD900/000000?text=+) `#3AD900`       |
| Definitions      | ![#FB94FF](https://placehold.it/15/FB94FF/000000?text=+) `#FB94FF`       |
| Invalid          | ![#EC3A37F5](https://placehold.it/15/EC3A37F5/000000?text=+) `#EC3A37F5` |
| Diff Added       | ![#00FF009A](https://placehold.it/15/00FF009A/000000?text=+) `#00FF009A` |
| Diff Removed     | ![#FF000D81](https://placehold.it/15/FF000D81/000000?text=+) `#FF000D81` |

<br>

![Learn Visual Studio Code](https://on.ahmda.ws/c01bf1/c)

## COURSE: Become [VSCode Power User →](https://vscode.pro/?utm_source=sop)

After 10 years with Sublime Text, I switched to VSCode — the new open source cross-platform editor everyone's talking about. I've spent over a 1,000 hours perfecting my setup to help you <a href="https://VSCode.pro/?utm_source=sop#module1">switch today</a> and bring all your <a href="https://VSCode.pro/?utm_source=sop#module2">custom settings</a> and the <a href="https://VSCode.pro/?utm_source=sop#module3">power user workflows</a> for <a href="https://VSCode.pro/?utm_source=sop#module4">HTML/CSS</a>, GitHub/<a href="https://VSCode.pro/?utm_source=sop#module5">Git &amp; Open Source</a>, supercharged <a href="https://VSCode.pro/?utm_source=sop#module6">Markdown</a>, and everything from <a href="https://VSCode.pro/?utm_source=sop#module7">JavaScript</a> to <a href="https://VSCode.pro/?utm_source=sop#module8">PHP</a>, Go, Python, C++, C#, ROR &amp; 50+ Extensions. I'm <a href="https://VSCode.pro/?utm_source=sop#module9">sharing it all</a> in five hours — 65 videos online course. <a href="https://VSCode.pro/?utm_source=sop" target="_blank">Learn Visual Studio Code →</a>

<div align="center">
  <a href="https://VSCode.pro/?utm_source=sop" target="_blank"><img src="https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/vscodepro.jpg" />🎯 Learn VSCode →</a>

  _<small><a href="https://VSCode.pro/?utm_source=sop" target="_blank">VSCode Power User Course →</a></small>_
</div>

<br>

![Hello](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/10_hello.png)

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

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

> #### [**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. [Support here →](https://pay.paddle.com/checkout/515568)

<br>

![License & Attribution thanks](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/12_license.png)

## 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. VSCode and Icons8 for the icons in this readme.

_👋 Follow Ahmad on Twitter_ — [![Ahmad on Twitter](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Follow%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/)

<br>
<br>
<br>

> After 10 years with Sublime Text, I switched to VSCode — the new open source cross-platform editor everyone's talking about. I've spent over a 1,000 hours perfecting my setup to help you <a href="https://VSCode.pro/?utm_source=sop#module1">switch today</a> and bring all your <a href="https://VSCode.pro/?utm_source=sop#module2">custom settings</a> and the <a href="https://VSCode.pro/?utm_source=sop#module3">power user workflows</a> for <a href="https://VSCode.pro/?utm_source=sop#module4">HTML/CSS</a>, GitHub/<a href="https://VSCode.pro/?utm_source=sop#module5">Git &amp; Open Source</a>, supercharged <a href="https://VSCode.pro/?utm_source=sop#module6">Markdown</a>, and everything from <a href="https://VSCode.pro/?utm_source=sop#module7">JavaScript</a> to <a href="https://VSCode.pro/?utm_source=sop#module8">PHP</a>, Go, Python, C++, C#, ROR &amp; 50+ Extensions. I'm <a href="https://VSCode.pro/?utm_source=sop#module9">sharing it all</a> in five hours — 65 videos online course. <a href="https://VSCode.pro/?utm_source=sop" target="_blank">Learn Visual Studio Code →</a>

<br>
<img src="https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/hr.png" />
<br>
<br>

<div align="center">
  <a href="https://VSCode.pro/?utm_source=sop" target="_blank">
  <img src="https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/vscodeproPlay.jpg" /><br>VSCode</a>

  _<small><a href="https://VSCode.pro/?utm_source=sop" target="_blank">VSCode Power User Course →</a></small>_
</div>
