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 πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

shades-of-purple

v7.3.2

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

84

Readme

Shades of Purple Theme for VS Code

Downloads rating installs VSCode.pro

GitHub stars GitHub followers Tweet for help

Install

Video Demo & Installation

Watch the following video on YouTube to learn more about the Shades of Purple theme. Learn how to install it and a few features like markdown editing β€” which's pretty awesome with SOP. Shhh, this video is part of VSCode.pro course β†’

πŸ“Ί 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 110+ 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 your editor.
  5. Code/File > Preferences > Color Theme > Shades of Purple.
  6. 🌟 Rate five-stars like 110+ awesome devs to appreciate the effort on 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.

P.S. You can use, Shades of Purple without this configuration as well. It just works.

// 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",
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
// MacOS Only Settings.
"workbench.fontAliasing": "auto",
"terminal.integrated.macOptionIsMeta": true,
"workbench.statusBar.feedback.visible": false,
// The default syntax (TextMate) highlighter classifies many tokens as variables and these are now (since VSCode 1.43) resolved into namespaces, classes, parameters, and so on. This is called Semantic highlighting support for TypeScript and JavaScript. But many themes and language extensions seem broken with single-colored syntax. This came as a surprise to me. It's set `true` by default. I recommend disabling this for now.
"editor.semanticHighlighting.enabled": false,
// SOP's highlight matching tag setting.
"highlight-matching-tag.styles": {
    "opening": {
        "full": {
            "highlight": "rgba(165, 153, 233, 0.3)"
        }
    }
},
// SOP's Import Cost Extension Settings.
"importCost.largePackageColor": "#EC3A37F5",
"importCost.mediumPackageColor": "#B362FF",
"importCost.smallPackageColor": "#B362FF"

πŸ¦„ I teach everything I know and my productive VSCode workflow with useful configurations for developers. Master 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.

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 makes SOP a perfect theme for teaching, presenting, and using on your site via Prisma or HighlightJS. A rough collection of actual colors in the SOP theme is listed below.

| USAGE | HEX CODES | | ---------------- | ------------------------------------------------------------------------ | | 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 |

Learn Visual Studio Code

COURSE: Become VSCode Power User β†’

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 switch today and bring all your custom settings and the power user workflows for HTML/CSS, GitHub/Git & Open Source, supercharged Markdown, and everything from JavaScript to PHP, Go, Python, C++, C#, ROR & 50+ Extensions. I'm sharing it all in five hours β€” 65 videos online course. Learn Visual Studio Code β†’

VSCode Power User Course β†’

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. Support here β†’

License & Attribution thanks

License & Attribution

Licensed as MIT β“’ Ahmad Awais.

Thanks to the VSCode team at Microsoft for creating such an excellent code editor. Also, 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

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 switch today and bring all your custom settings and the power user workflows for HTML/CSS, GitHub/Git & Open Source, supercharged Markdown, and everything from JavaScript to PHP, Go, Python, C++, C#, ROR & 50+ Extensions. I'm sharing it all in five hours β€” 65 videos online course. Learn Visual Studio Code β†’

VSCode Power User Course β†’