⚑ A professional theme with hand-picked & bold shades of purple πŸ¦„ to go along with your VS Code. Reviewed by several designers and 50+ releases to keep it updated. One of the best VSCode themes on VS Code Marketplace. Part of VSCode.pro course.


Keywords
Shades of Purple, Dark Theme, VSCode Power User, Shade of Purple, Cobalt
Install
npm install shades-of-purple@3.13.0

Documentation

New in the Shades of Purple ThemeΒ  Tab stops + Menu Separator + Activity Bar color improvements.

Shades of Purple Theme for VS Code

Version Developers Using Shades of Purple Rating VSCode.pro


Shades of Purple (SOP)
A professional theme with hand-picked & bold shades of purple πŸ’œ to go along with your VS Code. A custom VS Code theme with style. Become a Visual Studio Code Power User β†’
A FOSS (Free & Open Source Software) project developed by Ahmad Awais.
Follow Ahmad's #FOSS work on GitHub @AhmadAwais β€” Say Hi on Twitter @MrAhmadAwais πŸ‘‹

GitHub stars GitHub followers Tweet for help


Install

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.

πŸ“Ί Watch The Video To Learn More β†’


Install

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 like 42+ awesome devs to appreciate the effort behind this theme.

alternate installation

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 the your editor.
  5. Code/File > Preferences > Color Theme > Shades of Purple.
  6. 🌟 Rate five-stars like 33+ awesome devs to appreciate the effort behind this theme.

Tips

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'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 FAQs

Frequently Asked Questions


Screenshots

Screenshots: Shades of Purple Theme

Markdown Syntax markdown


hr


JavaScript Syntax JavaScript


hr


PHP Syntax PHP


hr


HTML Syntax HTML


hr


Pug Syntax Pug


hr


Python Syntax Python


hr


Go Syntax Go


Shades of purple for other software

Put Shades of Purple In Other Places

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


Learn Visual Studio Code

The VSCode.pro Course β†’

Folks, I have spent an year in making a near-perfect VSCode.pro course to help you become a VSCode Power User and learn most of the VSCode Tips & Tricks. Maybe you'd like to signup, I am launching the course this month.


Hello

Hello, we're the Dev Couple!

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

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.


Partners & Backers

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 thanks

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.

πŸ‘‹ Follow Ahmad on Twitter β€” Ahmad on Twitter