Shades of Purple

A professional theme with hand-picked & bold shades of purple

NEW: Diff Colors · Co-pilot Chat · Shades of Purple (Super Dark) BETA

About

Shades of Purple is a professional color theme carefully designed to reduce eye strain and improve code readability. With over 5 million developers using it worldwide, it has become one of the most loved themes in the VS Code marketplace.

What makes it special:

• Hand-picked color palette optimized for readability
• Comprehensive support for 50+ programming languages
• Perfect for presentations, teaching, and daily coding
• Regular updates for the latest VS Code features
• Free and open source

Created by Ahmad Awais · Learn VSCode · @MrAhmadAwais

Table of Contents

• About
• What Developers Say
• Installation
  • Easy Installation
  • Alternate Installation
• Video Tutorial
• Recommended Settings
• Screenshots
• Put Shades of Purple in Other Places
• Color Palette Reference
• FAQs
• Master VS Code Course
• License & Attribution

Video Demo & Installation

Watch this comprehensive video guide to see Shades of Purple in action. Learn the installation process and discover features like enhanced markdown editing, syntax highlighting, and customization options.

This video is part of the VSCode.pro course — a complete guide to mastering Visual Studio Code.

📺 Watch the Video Tutorial →

Easy Installation

Get started with Shades of Purple in under a minute:

1. Open the extensions sidebar in Visual Studio Code
2. Search for Shades of Purple Theme
3. Click Install to install it
4. Click Reload to reload your editor
5. Select the theme — Code/File ＞ Preferences ＞ Color Theme ＞ Shades of Purple
6. Enjoy! And consider leaving a review ⭐⭐⭐⭐⭐

Love the theme? Over 110+ developers have already rated it five stars. Join them →

Alternate Installation

Prefer the command palette? Here's the quick way:

1. Launch Quick Open — Press Cmd+P on macOS or Ctrl+P on Windows/Linux
2. Paste the command — ext install shades-of-purple
3. Hit Enter and click Install
4. Click Reload to reload your editor
5. Select the theme — Code/File ＞ Preferences ＞ Color Theme ＞ Shades of Purple

Recommended Settings

Shades of Purple works great out of the box. But for the ultimate experience, especially if you use Operator Mono or a similar font, try these custom settings:

Note: These settings are completely optional. The theme works beautifully with your existing configuration.

{
  // Theme Setup
  "workbench.colorTheme": "Shades of Purple",
  "workbench.iconTheme": "vscode-icons",

  // Font Settings (Operator Mono recommended)
  "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,

  // Cursor Settings
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",

  // Editor Behavior
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.glyphMargin": true,
  "workbench.editor.enablePreview": false,
  "workbench.startupEditor": "newUntitledFile",

  // File Management
  "explorer.confirmDragAndDrop": false,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,

  // Formatting (Optional)
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "eslint.run": "onType",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // macOS Specific
  "workbench.fontAliasing": "auto",
  "terminal.integrated.macOptionIsMeta": true,
  "workbench.statusBar.feedback.visible": false,

  // Semantic Highlighting
  "editor.semanticHighlighting.enabled": false,

  // Extension Settings for Shades of Purple
  "highlight-matching-tag.styles": {
    "opening": {
      "full": {
        "highlight": "rgba(165, 153, 233, 0.3)"
      }
    }
  },
  "importCost.largePackageColor": "#EC3A37F5",
  "importCost.mediumPackageColor": "#B362FF",
  "importCost.smallPackageColor": "#B362FF"
}

Bonus: Custom VSCode Icon

Want to go all-in on purple? Use this custom Shades of Purple VSCode icon based on the excellent work by VSCode Icons.

What Developers Say

Used by 5,000,000+ developers worldwide with 175 five-star ratings. Here's what makes them stay:

🎯 Perfect for Presentations

💜 Once You Switch, You Can't Go Back

👀 Easy on the Eyes

🏆 Best Theme Ever

🎨 Beautiful & Unique Colors

🚀 Boosts Productivity

🎮 The Fun Factor

Want to master VS Code? After 10 years with Sublime Text, I switched to VSCode and spent 1,000+ hours perfecting my setup. I've distilled everything into a comprehensive course covering workflows for HTML/CSS, JavaScript, PHP, Git, Markdown, and 50+ extensions. Learn more at VSCode.pro →

Frequently Asked Questions

Got questions? Here are the most common ones:

• How do I disable italics? — Settings for a no-italics version
• Highlight Matching Tag settings? — Matching styles configuration
• Indent Rainbow settings? — Compatible color configuration
• VSCode Power User Setup? — Complete course on my workflow

Screenshots: Shades of Purple in Action

See how Shades of Purple enhances syntax highlighting across multiple languages:

Put Shades of Purple in Other Places

Love the theme? Take Shades of Purple everywhere you code. I've built matching themes for your entire development workflow:

Editors & Terminals

• VSCode — The flagship theme you're reading about
• iTerm2 — Beautiful terminal experience for macOS
• Hyper™ — Electron-based terminal theme
• Alacritty — GPU-accelerated terminal emulator
• Konsole — KDE terminal emulator theme
• Cygwin — Windows terminal environment

Syntax Highlighting

• HighlightJS — Web-based syntax highlighting
• Prism — React syntax highlighter (CSS version)
• Code Surfer — MDX Deck code presentations
• Bat — Cat clone with syntax highlighting

Apps & Tools

• Google Chrome — Browser theme for Chrome
• Alfred — macOS productivity app theme
• Slack — Team collaboration theme
• WordPress — Admin dashboard theme

Themed your favorite app with Shades of Purple? Let me know! I'd love to feature it here.

Color Palette Reference

Shades of Purple uses a carefully selected palette optimized for contrast and readability. Perfect for implementing the theme in your own projects or creating matching assets.

| Usage | Color Preview | Hex Code | | ---------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------- | | Background | | #2D2B55 | | Background Dark | | #1E1E3F | | Foreground | | #A599E9 | | Hover Background | | #4D21FC | | Contrast | | #FAD000 | | Contrast Lite | | #FFEE80 | | Contrast Lite II | | #FAEFA5 | | Highlight | | #FF7200 | | Comment | | #B362FF | | Constants | | #FF628C | | Keywords | | #FF9D00 | | Other | | #9EFFFF | | Strings | | #A5FF90 | | Templates | | #3AD900 | | Definitions | | #FB94FF | | Invalid | | #EC3A37F5 | | Diff Added | | #00FF009A | | Diff Removed | | #FF000D81 |

Master VS Code — Become a Power User

After a decade with Sublime Text, I made the switch to VSCode. The transition taught me everything about productive workflows, essential extensions, and optimal configurations. I've distilled all that knowledge into a comprehensive course: VSCode.pro.

About the Creator

Hello! I'm Ahmad Awais, I made Shades of Purple together with my better half Maedah Batool. I'm a developer, open source enthusiast, and educator. I love building tools that make developers' lives easier.

License & Attribution

MIT Licensed · Copyright © Ahmad Awais

Credits

Shades of Purple draws inspiration from the excellent work of many theme creators, including:

• Roberto Achar's original tmTheme
• Icons8 for the assets used in this documentation
• The VSCode team at Microsoft for creating an incredible editor

Connect

• Follow on GitHub: @AhmadAwais
• Follow on Twitter: @MrAhmadAwais
• Blog: AhmadAwais.com