Skip to main content

​
Quick start guide

This guide will help you get Shades of Purple set up and optimized for the best coding experience. Follow these steps to go from installation to a fully configured setup.

​
Before you begin

Make sure you have:
  • VS Code version 1.15.0 or higher
  • 2-3 minutes to complete the setup

​
Install and activate

1

Install the theme

If you haven’t already installed Shades of Purple, open the Extensions sidebar (Cmd/Ctrl+Shift+X) and search for “Shades of Purple Theme”. Click Install.See detailed installation instructions →
2

Activate the theme

Open the Color Theme picker:
  • macOS: Cmd+K then Cmd+T
  • Windows/Linux: Ctrl+K then Ctrl+T
Select Shades of Purple from the list.
3

Verify the theme is active

You should immediately see the purple color scheme applied. Look for:
  • Purple background (#2D2B55)
  • Vibrant syntax highlighting
  • Purple accents in the UI

​
What you should see

Once activated, Shades of Purple transforms your entire VS Code interface:

​
Editor appearance

  • Background: Deep purple (#2D2B55) that’s easy on the eyes
  • Text: Light purple-gray (#A599E9) for excellent readability
  • Keywords: Orange (#FF9D00) that stands out clearly
  • Strings: Bright green (#A5FF90) for easy identification
  • Comments: Muted purple (#B362FF) that doesn’t distract
  • Functions: Pink (#FB94FF) for clear definition highlighting

​
UI elements

  • Sidebar: Dark purple background with vibrant highlights
  • Activity bar: Purple with orange accents on hover
  • Status bar: Purple with contextual color changes
  • Tabs: Clear active/inactive states with purple styling
If you prefer a darker variant, try “Shades of Purple (Super Dark)” - currently in BETA but available in the Color Theme menu.

​
Recommended first steps

Get the most out of Shades of Purple with these optional but recommended configurations.

​
Add a complementary icon theme

For the complete visual experience, pair Shades of Purple with an icon theme:
  1. Open Settings (Cmd/Ctrl+,)
  2. Search for “File Icon Theme”
  3. Select vscode-icons (recommended) or your preferred icon pack
Add to your settings.json: 
{
  "workbench.iconTheme": "vscode-icons"
}

​
Disable semantic highlighting (optional)

For the pure Shades of Purple experience as designed, you may want to disable semantic highlighting: 
{
  "editor.semanticHighlighting.enabled": false
}
Semantic highlighting can sometimes override theme colors in TypeScript and other languages. Disabling it ensures consistent Shades of Purple styling.

​
Adjust font settings (optional)

While Shades of Purple works with any font, it pairs beautifully with fonts that support ligatures: 
{
  "editor.fontFamily": "'Operator Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.fontLigatures": true
}
Operator Mono is the recommended font for Shades of Purple, but Fira Code is a great free alternative with excellent ligature support.

​
Test your setup

Create a test file to see Shades of Purple in action:

​
JavaScript example

// This is a comment in Shades of Purple
import { useState } from 'react';

const UserProfile = ({ name, email }) => {
  const [isActive, setIsActive] = useState(true);
  
  const handleToggle = () => {
    setIsActive(!isActive);
  };
  
  return (
    <div className="profile">
      <h1>{name}</h1>
      <p>{email}</p>
      <button onClick={handleToggle}>
        {isActive ? 'Deactivate' : 'Activate'}
      </button>
    </div>
  );
};

export default UserProfile;
You should see:
  • Orange keywords (const, return, import)
  • Pink function names (UserProfile, handleToggle)
  • Green strings ("profile", "Deactivate")
  • Purple comments
  • Cyan JSX tags

​
Python example

# Calculate factorial recursively
def factorial(n):
    """Return the factorial of n."""
    if n <= 1:
        return 1
    return n * factorial(n - 1)

result = factorial(5)
print(f"The factorial is: {result}")

​
Optimize for presentations

If you use Shades of Purple for live coding or screen recordings: 
{
  "editor.fontSize": 18,
  "editor.lineHeight": 28,
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Shades of Purple"
}
Shades of Purple is specifically designed for high contrast visibility, making it perfect for presentations and teaching.

​
Configure terminal colors

For a cohesive experience, match your integrated terminal to Shades of Purple: 
{
  "terminal.integrated.fontFamily": "'Operator Mono', 'Inconsolata for Powerline', monospace"
}
For a complete terminal experience, install the Shades of Purple iTerm2 theme or Hyper theme.

​
Advanced configuration (optional)

For power users who want the ultimate Shades of Purple setup: 
{
  "workbench.colorTheme": "Shades of Purple",
  "workbench.iconTheme": "vscode-icons",
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', 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.semanticHighlighting.enabled": false,
  "workbench.fontAliasing": "auto"
}
See complete recommended settings →

​
Extend to other apps

Take Shades of Purple beyond VS Code:

iTerm2 theme

Beautiful terminal for macOS

Hyper theme

Electron-based terminal

Chrome theme

Browser theme for Chrome

Slack theme

Team collaboration theme

​
Troubleshooting

​
Colors not showing correctly

  1. Verify the theme is active: Cmd/Ctrl+K then Cmd/Ctrl+T > “Shades of Purple”
  2. Disable semantic highlighting (see above)
  3. Check for conflicting color customizations in settings.json

​
Theme looks washed out

  1. Check your monitor’s brightness and contrast settings
  2. Ensure you selected “Shades of Purple” not “Shades of Purple (Super Dark)”
  3. Try adjusting workbench.fontAliasing to "auto" or "antialiased"
Some color calibration software or night mode apps can affect how Shades of Purple appears. Try temporarily disabling them to see the theme as intended.

​
Next steps

You’re all set! Here’s what to explore next:
Questions or feedback? Connect with the creator Ahmad Awais on Twitter.

Build docs developers (and LLMs) love

Get started for freeTalk to us