Skip to main content
Shades of Purple works beautifully with many VSCode extensions. Here are the recommended extensions and their configurations for the best experience.

​
Essential Extensions

Highlight Matching Tag

Highlights matching opening and closing tags in HTML/JSX

Import Cost

Display inline the size of the imported package

VSCode Icons

Beautiful file icons that complement the purple theme

Indent Rainbow

Colorizes indentation for better code readability

​
Extension Configurations

​
Highlight Matching Tag

This extension highlights matching HTML/JSX tags when you click on them. Configure it with these purple-themed colors: 
"highlight-matching-tag.styles": {
  "opening": {
    "full": {
      "highlight": "rgba(165, 153, 233, 0.3)"
    }
  }
}
The purple highlight (#A599E9 with 30% opacity) perfectly matches the theme’s color palette.

​
Import Cost

Import Cost shows the size of imported JavaScript packages. Configure it with Shades of Purple colors: 
"importCost.largePackageColor": "#EC3A37F5",
"importCost.mediumPackageColor": "#B362FF",
"importCost.smallPackageColor": "#B362FF"
  • Large packages (red #EC3A37F5): Stand out as potential issues
  • Medium packages (purple #B362FF): Use the theme’s comment color
  • Small packages (purple #B362FF): Blend nicely with the theme

​
VSCode Icons

Set VSCode Icons as your icon theme in your settings: 
"workbench.iconTheme": "vscode-icons"
Want to go all-in on purple? Try the custom Shades of Purple VSCode icon for your application.

​
Indent Rainbow

For Indent Rainbow configuration that works well with Shades of Purple, you can customize the indent colors to match the purple theme palette. See this issue for recommended settings.

​
Extension Compatibility Tips

Some extensions work better with semantic highlighting disabled:
"editor.semanticHighlighting.enabled": false
This ensures the theme’s hand-picked syntax colors remain consistent.
If using a font with ligatures (like Operator Mono or Fira Code), enable them:
"editor.fontLigatures": true
This works beautifully with the theme’s syntax highlighting.
For formatting extensions like Prettier:
"editor.formatOnSave": true,
"prettier.eslintIntegration": true
These settings ensure code stays clean and readable.

​
Complete Recommended Settings

For the ultimate Shades of Purple experience with all extensions configured: 
{
  // Theme Setup
  "workbench.colorTheme": "Shades of Purple",
  "workbench.iconTheme": "vscode-icons",
  
  // 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",
  
  // Editor Enhancements
  "editor.semanticHighlighting.enabled": false,
  "editor.fontLigatures": true,
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.glyphMargin": true,
  
  // Formatting
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "eslint.run": "onType",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

​
Extension Issues?

Report Theme Issues

Found an extension compatibility issue? Let us know!

FAQ

Check common questions and solutions

Build docs developers (and LLMs) love

Get started for freeTalk to us