Theme Customization

While Shades of Purple is designed to work beautifully out of the box, VSCode provides powerful customization options to tailor the theme to your specific needs.

Customization Methods

You can customize Shades of Purple in three main ways:

Workbench Colors - Modify UI elements (sidebar, tabs, status bar, etc.)
Token Colors - Adjust syntax highlighting colors
Semantic Highlighting - Control intelligent code coloring

Workbench Color Customization

Workbench colors control VSCode’s UI elements. Add these to your settings.json:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "editor.background": "#2D2B55",
      "sideBar.background": "#222244",
      "activityBar.background": "#28284E",
      "statusBar.background": "#1E1E3F"
    }
  }
}

The [Shades of Purple] scope ensures your customizations only apply when using this theme.

Common Workbench Customizations

Editor Background Colors

Customize the main editor and related backgrounds:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "editor.background": "#2D2B55",
      "editor.lineHighlightBackground": "#1F1F41",
      "editorGutter.background": "#28284E",
      "editorLineNumber.foreground": "#A599E9"
    }
  }
}

These values are the theme defaults - modify them to suit your preference.

Sidebar & Activity Bar

Customize the sidebar and activity bar appearance:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "sideBar.background": "#222244",
      "sideBar.foreground": "#A599E9",
      "activityBar.background": "#28284E",
      "activityBar.foreground": "#FFFFFF",
      "activityBarBadge.background": "#FAD000",
      "activityBarBadge.foreground": "#1E1E3F"
    }
  }
}

Terminal Colors

Adjust integrated terminal colors:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "terminal.background": "#1E1E3F",
      "terminal.foreground": "#FFFFFF",
      "terminal.ansiBlack": "#000000",
      "terminal.ansiRed": "#EC3A37F5",
      "terminal.ansiGreen": "#3AD900",
      "terminal.ansiYellow": "#FAD000",
      "terminal.ansiBlue": "#7857fe",
      "terminal.ansiMagenta": "#FF2C70",
      "terminal.ansiCyan": "#80FCFF",
      "terminal.ansiWhite": "#FFFFFF"
    }
  }
}

Status Bar

Modify status bar colors:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "statusBar.background": "#1E1E3F",
      "statusBar.foreground": "#A599E9",
      "statusBar.debuggingBackground": "#FAD000",
      "statusBar.debuggingForeground": "#1E1E3F"
    }
  }
}

Tabs & Editor Groups

Customize tab appearance:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "tab.activeBackground": "#222244",
      "tab.activeForeground": "#FFFFFF",
      "tab.activeBorder": "#FAD000",
      "tab.inactiveBackground": "#2D2B55",
      "tab.inactiveForeground": "#A599E9",
      "editorGroupHeader.tabsBackground": "#2D2B55"
    }
  }
}

Token Color Customization

Token colors control syntax highlighting. Use editor.tokenColorCustomizations to modify specific code elements:

{
  "editor.tokenColorCustomizations": {
    "[Shades of Purple]": {
      "comments": "#B362FF",
      "strings": "#A5FF90",
      "keywords": "#FF9D00",
      "functions": "#FAD000",
      "variables": "#E1EFFF"
    }
  }
}

Advanced Token Customization

For fine-grained control, use TextMate rules:

{
  "editor.tokenColorCustomizations": {
    "[Shades of Purple]": {
      "textMateRules": [
        {
          "scope": ["comment", "punctuation.definition.comment"],
          "settings": {
            "foreground": "#B362FF",
            "fontStyle": "italic"
          }
        },
        {
          "scope": "keyword",
          "settings": {
            "foreground": "#FF9D00",
            "fontStyle": ""
          }
        }
      ]
    }
  }
}

Semantic Highlighting

Semantic highlighting provides intelligent, context-aware syntax coloring. By default, Shades of Purple disables this to preserve the carefully crafted color scheme:

{
  "editor.semanticHighlighting.enabled": false
}

Enabling semantic highlighting may override some of the theme’s color choices and change the visual appearance significantly.

Customizing Semantic Tokens

If you enable semantic highlighting, you can customize it:

{
  "editor.semanticHighlighting.enabled": true,
  "editor.semanticTokenColorCustomizations": {
    "[Shades of Purple]": {
      "enabled": true,
      "rules": {
        "*.declaration": { "bold": true },
        "*.readonly": { "fontStyle": "italic" },
        "parameter": "#9EFFFF",
        "property": "#FFEE80",
        "class": "#FB94FF"
      }
    }
  }
}

Extension-Specific Settings

Some extensions benefit from theme-specific color configurations:

Highlight Matching Tag

This extension highlights matching HTML/JSX tags. Configure it to match Shades of Purple:

{
  "highlight-matching-tag.styles": {
    "opening": {
      "full": {
        "highlight": "rgba(165, 153, 233, 0.3)"
      }
    }
  }
}

The purple transparency (rgba(165, 153, 233, 0.3)) complements the theme perfectly.

Install Highlight Matching Tag from the VSCode marketplace.

Import Cost

The Import Cost extension shows the size of imported packages. These colors integrate seamlessly:

{
  "importCost.largePackageColor": "#EC3A37F5",
  "importCost.mediumPackageColor": "#B362FF",
  "importCost.smallPackageColor": "#B362FF"
}

Large packages: Red (#EC3A37F5) - matches theme’s error/warning color
Medium packages: Purple (#B362FF) - matches theme’s comment color
Small packages: Purple (#B362FF) - consistent with medium

Install Import Cost from the VSCode marketplace.

Indent Rainbow

For indent visualization that works with the theme:

{
  "indentRainbow.colors": [
    "rgba(165, 153, 233, 0.1)",
    "rgba(165, 153, 233, 0.2)",
    "rgba(165, 153, 233, 0.3)",
    "rgba(165, 153, 233, 0.4)"
  ]
}

See the GitHub discussion for more Indent Rainbow configurations.

Theme Color Reference

Here are the main colors used in Shades of Purple that you can reference in customizations:

Color Name	Hex Code	Usage
Background	`#2D2B55`	Main editor background
Background Dark	`#1E1E3F`	Darker backgrounds (terminal, sidebar)
Foreground	`#A599E9`	Default text color
Yellow/Gold	`#FAD000`	Keywords, highlights, cursor
Orange	`#FF7200`	Warnings, special elements
Light Orange	`#FF9D00`	Keywords, operators
Purple	`#B362FF`	Comments, medium emphasis
Pink/Magenta	`#FF628C`	Constants, errors
Light Pink	`#FB94FF`	Definitions, classes
Green	`#A5FF90`	Strings, success states
Cyan	`#9EFFFF`	Variables, tags, meta
Red	`#EC3A37F5`	Errors, deletions

For the complete color palette, see the Color Palette Reference.

Example: Custom Theme Variant

Here’s an example of creating a darker variant of Shades of Purple:

{
  "workbench.colorCustomizations": {
    "[Shades of Purple]": {
      "editor.background": "#1E1E3F",
      "sideBar.background": "#181833",
      "activityBar.background": "#1A1A38",
      "statusBar.background": "#141428",
      "panel.background": "#141428",
      "terminal.background": "#141428",
      "editorGroupHeader.tabsBackground": "#1E1E3F",
      "tab.inactiveBackground": "#1E1E3F"
    }
  }
}

VSCode also offers a “Shades of Purple (Super Dark)” variant in beta. Look for it in the theme selector!

If you create a customization you love:

Share it in the GitHub Discussions
Tweet it to @MrAhmadAwais
Consider creating a derivative theme

Troubleshooting

Changes Not Appearing

Ensure you’re using the exact theme name: [Shades of Purple]
Check for JSON syntax errors in settings.json
Reload VSCode window (Cmd+Shift+P → “Reload Window”)
Verify the theme is active in Color Theme selector

Colors Look Wrong

Disable semantic highlighting if it interferes
Check for conflicting extensions that modify colors
Reset to defaults by removing customizations
Ensure you’re using the latest theme version

Next Steps

Review the Recommended Settings for optimal configuration
Configure your Font Setup for the best visual experience
Explore the Color Palette for all available theme colors

Get Started

Theme Variants

Configuration

Guides

Support

Customization Methods

Workbench Color Customization

Common Workbench Customizations

Token Color Customization

Advanced Token Customization

Semantic Highlighting

Customizing Semantic Tokens

Extension-Specific Settings

Highlight Matching Tag

Import Cost

Indent Rainbow

Theme Color Reference

Example: Custom Theme Variant

Troubleshooting

Changes Not Appearing

Colors Look Wrong

Next Steps

Build docs developers (and LLMs) love

Get Started

Theme Variants

Configuration

Guides

Support

​Customization Methods

​Workbench Color Customization

​Common Workbench Customizations

​Token Color Customization

​Advanced Token Customization

​Semantic Highlighting

​Customizing Semantic Tokens

​Extension-Specific Settings

​Highlight Matching Tag

​Import Cost

​Indent Rainbow

​Theme Color Reference

​Example: Custom Theme Variant

​Sharing Your Customizations

​Troubleshooting

​Changes Not Appearing

​Colors Look Wrong

​Next Steps

Build docs developers (and LLMs) love

Customization Methods

Workbench Color Customization

Common Workbench Customizations

Token Color Customization

Advanced Token Customization

Semantic Highlighting

Customizing Semantic Tokens

Extension-Specific Settings

Highlight Matching Tag

Import Cost

Indent Rainbow

Theme Color Reference

Example: Custom Theme Variant

Sharing Your Customizations

Troubleshooting

Changes Not Appearing

Colors Look Wrong

Next Steps