🔥 Demon Pro Themes

Two sleek, eye-friendly themes for Visual Studio Code - Perfect for any time of day

🌙 Demon Dark Pro - A striking demonic dark theme
☀️ Demon Light Pro - A professional, user-friendly light theme

🌟 Overview

Demon Pro includes two complementary themes designed for developers who code at any time of day:

Demon Dark Pro - A meticulously crafted dark theme combining a striking demonic aesthetic with practical eye comfort. Perfect for evening coding and low-light environments.
Demon Light Pro - A professional light theme with user-friendly colors optimized for daytime coding and bright environments.

Both themes reduce eye strain while maintaining excellent readability and visual appeal across all conditions.

✨ Features

� Demon Dark Pro

�🎨 Visual Excellence

Deep Black Backgrounds - Ultra-dark (#0a0a0a) for maximum contrast
Demonic Red Accents - Signature red (#ff4757) throughout the interface
Carefully Curated Palette - 12 harmonious colors optimized for syntax highlighting
Consistent Design Language - Unified experience across all VS Code elements

👁️ Eye Comfort

Reduced Blue Light - Warmer color temperature for evening coding
Optimal Contrast Ratios - WCAG AA compliant for accessibility
Subtle Animations - Smooth transitions and highlights
Comfortable Cursor - Bright red cursor for easy tracking

☀️ Demon Light Pro

🎨 Visual Excellence

Clean White Background - Pure white (#ffffff) for bright environments
Professional Colors - Modern red (#d32f2f) with rich purple accents
High Contrast Design - Easy to read in any lighting condition
Consistent Style - Mirrors dark theme structure with inverted colors

�️ Eye Comfort

Daytime Friendly - Optimized for bright displays
Low Blue Light Accent - Comfortable for extended viewing
Clear Hierarchy - Excellent readability in presentations
Professional Appearance - Suitable for screen sharing and collaboration

�🛠️ Both Themes Include Developer Focused Features

20+ Language Support - Comprehensive syntax highlighting
Semantic Tokens - Modern language feature support
Enhanced Syntax Highlighting - 40+ specialized token scopes
Framework Support - React/JSX, TypeScript, Python, SQL, YAML
Git Integration - Color-coded version control indicators
Terminal Theming - Full ANSI color support
Error Highlighting - Clear visual error indicators
Decorator Support - Special highlighting for decorators/annotations
Magic Methods - Python dunder method highlighting

🖼️ Screenshots

Main Editor

// Sample JavaScript Code
class DemonTheme {
  constructor(name) {
    this.name = name;
    this.colors = {
      primary: '#ff4757',    // Demon Red
      secondary: '#2ed573',  // Matrix Green
      accent: '#ffa502'      // Warning Orange
    };
  }

  /**
   * Apply theme to editor
   * @param {Object} editor - VS Code editor instance
   * @returns {Promise<void>}
   */
  async applyTheme(editor) {
    try {
      await editor.setColorTheme(this.name);
      console.log(`✅ ${this.name} theme applied successfully!`);
    } catch (error) {
      console.error('❌ Failed to apply theme:', error.message);
    }
  }
}

const theme = new DemonTheme('Demon Dark Pro');
theme.applyTheme(vscode.window.activeTextEditor);

Python Support

# Sample Python Code
import asyncio
from typing import Dict, List, Optional
from dataclasses import dataclass

@dataclass
class ThemeConfig:
    """Configuration for Demon Dark Pro theme"""
    name: str = "Demon Dark Pro"
    background: str = "#0a0a0a"
    accent: str = "#ff4757"
    
    def __post_init__(self):
        self.validate_colors()
    
    def validate_colors(self) -> None:
        """Validate hex color codes"""
        colors = [self.background, self.accent]
        for color in colors:
            if not color.startswith('#') or len(color) != 7:
                raise ValueError(f"Invalid color: {color}")

async def setup_theme(config: ThemeConfig) -> Dict[str, str]:
    """Setup theme configuration"""
    print(f"🔥 Setting up {config.name}")
    
    # Simulate async operation
    await asyncio.sleep(0.1)
    
    return {
        "status": "success",
        "theme": config.name,
        "message": "Theme ready for use! 😈"
    }

# Usage example
if __name__ == "__main__":
    theme_config = ThemeConfig()
    result = asyncio.run(setup_theme(theme_config))
    print(result)

HTML/CSS Support

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demon Dark Pro Theme</title>
    <style>
        .demon-container {
            background: linear-gradient(135deg, #0a0a0a, #1a0f0f);
            color: #e8e8e8;
            font-family: 'JetBrains Mono', monospace;
            border: 2px solid #ff4757;
            border-radius: 8px;
            padding: 20px;
        }
        
        .highlight {
            background-color: #2d1b1b;
            color: #ff4757;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        @keyframes pulse {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }
    </style>
</head>
<body>
    <div class="demon-container">
        <h1>🔥 Welcome to <span class="highlight">Demon Dark Pro</span></h1>
        <p>The ultimate dark theme for developers</p>
    </div>
</body>
</html>

JSON Configuration

{
  "workbench.colorTheme": "Demon Dark Pro",
  "editor.fontFamily": "JetBrains Mono, Fira Code, Cascadia Code",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5,
  "editor.fontLigatures": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "terminal.integrated.fontFamily": "JetBrains Mono",
  "git.decorations.enabled": true,
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always"
}

🚀 Installation

From VS Code Marketplace (Recommended)

Open Extensions (Ctrl+Shift+X)
Search for "Demon Pro"
Click Install
Both themes are now available!

Command Line Installation

ext install mrsiddharthsolanki.demon-pro-themes

Manual Installation

Download the theme files

Navigate to VS Code extensions folder:

Windows: %USERPROFILE%\.vscode\extensions\
macOS: ~/.vscode/extensions/
Linux: ~/.vscode/extensions/

Create theme directory:

mkdir demon-pro-themes-2.4.0
cd demon-pro-themes-2.4.0

Add the following files from the repository
Restart VS Code

⚡ Quick Setup

Activate Dark Theme

Press Ctrl/Cmd + Shift + P
Type "Preferences: Color Theme"
Select "Demon Dark Pro"

Activate Light Theme

Press Ctrl/Cmd + Shift + P
Type "Preferences: Color Theme"
Select "Demon Light Pro"

Keyboard Shortcut

Use Ctrl/Cmd + K, Ctrl/Cmd + T to open theme selector

🎨 Color Palettes

🌙 Demon Dark Pro Colors

Element	Color	Hex Code	Usage
Background	Deep Black	`#0a0a0a`	Editor, sidebar backgrounds
Foreground	Light Gray	`#e8e8e8`	Main text, variables
Accent	Demon Red	`#ff4757`	Keywords, cursor, highlights
Success	Matrix Green	`#2ed573`	Strings, success states
Warning	Hell Orange	`#ffa502`	Functions, warnings
Info	Mystic Blue	`#3742fa`	Types, information
Purple	Light Lavender	`#d9a8ff`	Numbers, constants, parameters
Cyan	Ice Blue	`#26d0ce`	Classes, properties
Comment	Shadow Gray	`#666666`	Comments, disabled text

☀️ Demon Light Pro Colors

Element	Color	Hex Code	Usage
Background	Pure White	`#ffffff`	Editor, sidebar backgrounds
Foreground	Dark Gray	`#2c2c2c`	Main text, variables
Accent	Modern Red	`#d32f2f`	Keywords, cursor, highlights
Success	Forest Green	`#388e3c`	Strings, success states
Warning	Ocean Blue	`#1565c0`	Functions, warnings
Info	Deep Blue	`#0277bd`	Types, information
Purple	Rich Purple	`#8e24aa`	Numbers, constants, parameters
Cyan	Teal	`#0097a7`	Classes, properties
Comment	Light Gray	`#999999`	Comments, disabled text

🌙☀️ Theme Comparison

Feature	Dark Pro	Light Pro
Best For	Evening/Night Coding	Daytime/Bright Environments
Eye Comfort	Low light friendly	Bright display optimized
Appearance	Demonic aesthetic	Professional appearance
Background	Ultra-dark black	Pure white
Syntax Scopes	50+	50+
Semantic Tokens	25+	25+
Language Support	20+	20+
Accessibility	WCAG AA	WCAG AA

🎨 Color Palette

🎯 Advanced Syntax Highlighting

The theme includes specialized highlighting for:

JavaScript/TypeScript:

Import/Export statements with bold red accent
this and super keywords in italic purple
Decorators with red highlighting
Template expression punctuation
Interface and type alias differentiation
Generic type parameters in light blue

Python:

Decorator syntax with @ symbol highlighting
self and cls parameters in italic purple
Magic/dunder methods (__init__, __str__, etc.) in bold italic light purple
Built-in functions with italic orange

React/JSX:

Component names in bold cyan
JSX attributes in italic orange
Proper distinction between HTML and React elements

CSS:

Class selectors in cyan
ID selectors in light purple
Property names in ice blue

Others:

SQL keywords in bold red
YAML keys properly highlighted
Regular expressions in green with italic style
Object literal keys in cyan
Constants in light purple

🌟 New Enhanced Features (v2.0.9)

Better Type & Constant Highlighting:

let, const, int, var keywords in light purple with bold styling
Function parameters with italic light purple for easy identification
Enum members distinctly highlighted
Type declarations with special styling
Readonly variables with light blue accent

Advanced Control Flow:

Async/Await keywords with special emphasis
Arrow functions with dedicated coloring
Control flow statements (if, while, for, switch) in bold red
Getter/Setter properties in bold orange

Improved Function Handling:

Function parameters displayed in italic light purple
Array/Collection brackets in bold orange
Namespace/Module references in italic cyan
Better method vs property differentiation

Type System Enhancements:

Interface definitions with bold italic blue
Type aliases with italic blue
Generic type parameters in light blue
Struct definitions in cyan
Type parameters clearly distinguished

🛠️ Customization

Font Recommendations

Primary Choices:

JetBrains Mono - Excellent for coding, great ligature support
Fira Code - Popular choice with extensive ligatures
Cascadia Code - Microsoft's modern coding font
Source Code Pro - Clean and highly readable

Settings for optimal experience:

{
  "editor.fontFamily": "JetBrains Mono, 'Fira Code', 'Cascadia Code', Consolas, monospace",
  "editor.fontSize": 14,
  "editor.fontWeight": "400",
  "editor.lineHeight": 1.5,
  "editor.fontLigatures": true
}

Enhanced Configuration

{
  "workbench.colorTheme": "Demon Dark Pro",
  
  // Font settings
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5,
  "editor.fontLigatures": true,
  "editor.fontWeight": "400",
  
  // Cursor and selection
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 2,
  
  // Bracket matching
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.guides.bracketPairsHorizontal": "active",
  
  // Indentation
  "editor.renderIndentGuides": true,
  "editor.guides.indentation": true,
  "editor.indentSize": 2,
  
  // Minimap
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 120,
  
  // Terminal
  "terminal.integrated.fontFamily": "JetBrains Mono",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.lineHeight": 1.3,
  
  // File tree
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always",
  
  // Git
  "git.decorations.enabled": true,
  "gitlens.currentLine.enabled": false,
  "gitlens.hovers.enabled": false
}

🔧 Troubleshooting

Theme Not Appearing

Restart VS Code completely
Check installation path
Verify JSON syntax using a JSON validator
Reload window: Ctrl/Cmd + Shift + P → "Developer: Reload Window"

Source Map Errors

These are normal and harmless:

Could not read source map for file:///c:/Users/...

Solution: Ignore them or disable source maps in settings:

{
  "debug.javascript.usePreview": false
}

Colors Not Displaying Correctly

Update VS Code to the latest version
Check color profile in your system settings
Disable other color extensions that might conflict

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Reporting Issues

Use the issue tracker for bugs and feature requests
Include VS Code version, OS, and theme version
Provide screenshots when relevant

Submitting Changes

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

Development Setup

git clone https://github.com/yourusername/demon-dark-pro.git
cd demon-dark-pro
npm install

📜 License

MIT License - feel free to use, modify, and distribute.

🙏 Credits

Inspired by: Dracula Theme, One Dark Pro, Material Theme
Color Theory: Based on research in eye comfort and readability
Community: Thanks to all beta testers and contributors

📊 Stats

Languages Supported: 20+
Color Tokens: 90+
Syntax Scopes: 50+
Semantic Tokens: 25+
UI Elements Themed: 100+
Development Time: 60+ hours
Eye Comfort Rating: ⭐⭐⭐⭐⭐

🔗 Links

📝 Changelog

Version 2.4.0 (Latest)

☀️ New Light Theme - Demon Light Pro theme added
🎨 Professional light theme for daytime coding
🌙 Dark theme remains unchanged with all previous features
✅ Both themes with 50+ syntax scopes
✅ Both themes with 25+ semantic tokens
🔄 Easy theme switching with Ctrl+K Ctrl+T
📦 Single installation for both themes
🎯 WCAG AA compliance for both

Version 2.0.9

🎨 Even lighter purple color (#d9a8ff) for optimal readability
✨ Added 10 new specialized syntax highlighting scopes
🔤 Enhanced let, const, int, var keyword highlighting
📍 Function parameter highlighting with italic styling
⚙️ New type & control flow enhancements
🎯 Async/Await and arrow function support
📦 Getter/Setter method highlighting
🔗 Improved namespace and module references
📋 Enhanced array/collection bracket styling
🎭 Better readonly variable differentiation

Version 1.0.1

🎨 Lighter purple color (#c78dff) for better visibility
✨ Added 25+ new syntax highlighting scopes
🔧 Enhanced semantic token support
🐍 Improved Python decorator and magic method highlighting
⚛️ Better React/JSX component and attribute styling
💎 TypeScript interface and generic type improvements
🎯 Added specialized highlighting for SQL, YAML, and regex
📦 Enhanced constant and enum member colors
🔨 Better template expression and embedded code support

Version 1.0.0

✨ Initial release
🎨 Complete theme implementation
👁️ Eye comfort optimizations
🛠️ 20+ language support
📱 Terminal integration
🔧 Git decoration support

🌙☀️ Two Themes, One Extension

Demon Dark Pro + Demon Light Pro

"Code in the darkness, see in the light" 😈🌞