npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

Iโ€™ve always been into building performant and accessible sites, but lately Iโ€™ve been taking it extremely seriously. So much so that Iโ€™ve been building a tool to help me optimize and monitor the sites that I build to make sure that Iโ€™m making an attempt to offer the best experience to those who visit them. If youโ€™re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, ๐Ÿ‘‹, Iโ€™m Ryan Hefnerย  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If youโ€™re interested in other things Iโ€™m working on, follow me on Twitter or check out the open source projects Iโ€™ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soonโ€“ish.

Open Software & Tools

This site wouldnโ€™t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you ๐Ÿ™

ยฉ 2026 โ€“ย Pkg Stats / Ryan Hefner

shades-of-purple

v7.3.6

Published

๐Ÿฆ„ A professional theme suite with hand-picked & bold shades of purple for your VS Code editor and terminal apps. One of the excellent, most downloaded, and top-rated VSCode Themes on the marketplace. Part of VSCode.pro course.

Downloads

276

Readme

Downloads Installs Rating VSCode.pro

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

Table of Contents


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.

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

"A gorgeous, high contrast theme that stands out without getting in the way. Especially great for doing developer talks and screencasts."

โ€” Shawn Swyx Wang ยท Latent Space, AI Engineer

๐Ÿ’œ Once You Switch, You Can't Go Back

"Once you switch to this theme you'll never switch back. There's nothing quite like it."

โ€” Kim Takala

"I switch syntax themes often, but I haven't felt the need to switch since using this one for the past 6 months, it's my new default."

โ€” Adam Hollister ยท Lead Developer @British & Irish Modern Music Institute

"I always tried to stay away from any addiction, but I can't help myself with this one; once you start using it, there's no way to go back. Kudos!"

โ€” Fahad Mir

๐Ÿ‘€ Easy on the Eyes

"Most comfortable theme to work with, especially the color contrast, great work."

โ€” Faris Abusada

"Sticking to code editor for long hours is no more pain for eyes ๐Ÿ’ฏ"

โ€” Fatima Mubeen

"I've tried a bunch of themes and this one seemed a bit garish at first... but I gave it a go and oh lord it's really good, not to mention the best to spend hours and hours coding without getting tired."

โ€” Pablo Herrero

๐Ÿ† Best Theme Ever

"In my 18+ years of coding experience, this is by far the most pleasing theme I've ever used in an editor (or any application for that matter)."

โ€” Muneeb Karim

"Best theme I've used in 20 years of development. I started using it about two weeks ago, I don't change anything, I already put everything that is available."

โ€” Gustavo Cassino

๐ŸŽจ Beautiful & Unique Colors

"Themes with more unique colors like purple are relatively rare, so it's great to see purple represented here. It's a fun theme, and it's easy to read!"

โ€” Ali Spittel ยท Tech Director @WomenWhoCode

"Just installed Shades of Purple and absolutely love it! I love these colors!"

โ€” Alexandra Spalato ยท JavaScript & WordPress Developer

"The colors just mesh so well. When I first saw this theme I thought. Ewww, Purple? But it very quickly grew on me and now only wish I had found it sooner."

โ€” Marco Crank

๐Ÿš€ Boosts Productivity

"I'm coding more and my productivity has skyrocketed. This theme makes it very easy to focus on the things that matter."

โ€” Raju Mandapati

"The choice of colours complement each other incredibly well and the overall UI is really pleasing to the eye."

โ€” Deleted User

๐ŸŽฎ The Fun Factor

"Feels like I'm in an arcade game 10/10"

โ€” Daniel Varcas

"I now love my editor"

โ€” Alec Hanefeld

โญโญโญโญโญ 175 five-star ratings ยท Read all 175+ reviews on the marketplace โ†’

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:

Screenshots: Shades of Purple in Action

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

Markdown

Markdown Syntax

Markdown Screenshot

Divider

JavaScript

JavaScript Syntax

JavaScript Screenshot

Divider

PHP

PHP Syntax

PHP Screenshot

Divider

HTML

HTML Syntax

HTML Screenshot

Divider

Pug

Pug Syntax

Pug Screenshot

Divider

Python

Python Syntax

Python Screenshot

Divider

Go

Go Syntax

Go Screenshot

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

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