π I’m super excited to launch my new purple Visual Studio Code theme called β Shades of Purple (SOP) β it includes hand-picked & bold shades of purple π¦ β purple can be genius.

π I’m super excited to launch my new purple Visual Studio Code theme called β Shades of Purple (SOP) β it includes hand-picked & bold shades of purple π¦ β purple can be genius.
π Download Shades of Purple from VSCode Marketplace
π© Used by ~650+ developers (launched 3 days ago)
β‘ Third most trending theme of VSC Marketplace
π25+ five-star positive ratings
π₯ http://VSCode.pro/tip/1
β
Also available for Slack / #iTerm2 / #Hyper / Konsole / AlfredApp
π π¦ β#
Shades of Purple (SOP)
A professional theme with hand-picked & bold shades of purple to go along with your VS Code.
BTW. As you might have read in my 2017 year in review post, that I’m also launching a course to help you become a VSCode Power User β
π EXCITED to launch my new VS @Code theme β Shades of Purple (SOP) β includes hand-picked & bold shades of purple π¦
π HERE β https://t.co/uSItlDl7ne
π© Used by 250+ devs
π 10+ ratings
π₯ https://t.co/L65xmpCw8qAlso
β @SlackHQ
β #iTerm2 / #Hyper
β @AlfredAppπ #RT pic.twitter.com/5aSLkBYm5d
— Ahmad Awais π₯ (@MrAhmadAwais) April 9, 2018
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’s quite pretty awesome with SOP.
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.
1. Launch Quick Open using Cmd+P β or β Ctrl+P.
1. Paste the command `ext install shades-of-purple`
1. Click Install to install it.
1. Click Reload to reload your editor.
1. Code/File οΌ Preferences οΌ Color Theme οΌ Shades of Purple.
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 amazing designer Dhanish called 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’ll be teaching more about configuring this theme and your Visual Studio Code editor at [VSCode.pro. Interested?! Sign up to become a VSCode Power User β
Shades of Purple
In Other Places!#I have built other SOP themes for different software. Here’s a list.
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 β
Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β pinky-promise!
Hey Ahmad… I love your theme. I’m not sure if I can do it myself but I wanted to make one request…
I code a lot in React and in my render function I love the teal blue… but text type of a components children or even just a normal p/h3/etc… tag is the same teal blue.
What do you think if you changed the text to color like the purple of a comment?
That’s very kind of you to say! π―
How about we move this conversation to GitHub issues? Create a GitHub issue at https://github.com/ahmadawais/shades-of-purple-vscode/issues β post what you want. Post the code in
```js ```
so that I can use the same code to work locally.I will either make the change or will guide you how you can do it yourself. When you use π¦ Shades of Purple that’s the kind of support you get.
Also, it’d mean a lot to get a five-star rating at the Marketplace. I am building the theme’s landing page and want to include some testimonials.
Peace! βοΈ
Hey Ahmad what is the font for the comments in code (the cursive font)
That’s Operator Mono. You can read about all my setup at Awais.dev/uses