🎨 Catppuccin Dark Pro

The Ultimate Hybrid VS Code Theme

🌙 Catppuccin Mocha UI + 💡 One Dark Pro Syntax = ✨ Perfect Harmony

The only theme that combines the elegant, modern aesthetics of Catppuccin Mocha with the battle-tested syntax highlighting of One Dark Pro. Featuring comprehensive semantic highlighting and ultra-flat design philosophy for the modern developer.

📸 Screenshots Gallery

Experience Catppuccin Dark Pro across 15+ programming languages with optimized syntax highlighting

🌐 Web Development

⚙️ Systems Programming

🏢 Enterprise & Backend

🌟 Scripting & Dynamic Languages

🎯 Specialized Languages

🎨 Language Highlights

✨ Key Features

🌙 UI Excellence

• Catppuccin Mocha Foundation: Soft, warm pastel colors for seamless visual flow
• Ultra-Flat Design: Completely borderless interface with #00000000 transparency
• Strategic Alpha Channels: Modern minimal aesthetics with depth
• Scientific Color Mapping: WCAG-compliant contrast ratios across 50+ UI elements

💡 Syntax Mastery

• 190+ Token Rules: Comprehensive highlighting mapped to Catppuccin's elegant palette
• One Dark Pro Inspired: Battle-tested readability patterns
• 15+ Languages: Specialized optimization for modern development
• Framework Awareness: Smart token recognition for enhanced understanding

🧠 Smart Features

• 15+ Semantic Tokens: Enhanced code understanding with IntelliSense integration
• Language Server Integration: TypeScript, Python, Rust, Go, C#, Java support
• Developer-Focused: Reduced eye strain with optimized contrasts
• Consistent Philosophy: Harmonized design across all UI elements

🎨 Color Philosophy & Science

This theme implements a sophisticated dual-layer color mapping system that perfectly balances Catppuccin's warm pastel aesthetics with One Dark Pro's proven readability patterns. Every color has been scientifically chosen based on WCAG contrast guidelines and visual hierarchy principles.

🎯 Core UI Palette (Catppuccin Mocha Foundation)

🌈 Syntax Highlighting Palette (Harmonized Mapping)

🎨 Advanced Color Science

• Contrast Ratios: All text colors maintain WCAG AA compliance (4.5:1 minimum)
• Alpha Transparency: Strategic use of alpha channels (22-44%) for depth without visual noise
• Color Temperature: Warm base tones (1e1e2e) balanced with cool accent colors for visual comfort
• Semantic Consistency: Colors maintain meaning across different contexts and languages

🚀 Installation

📦 Marketplace Installation (Recommended)

# Quick install via VS Code CLI
code --install-extension catppuccin-dark-pro.catppuccin-dark-pro

Or via GUI:

1. Open VS Code
2. Open Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Catppuccin Dark Pro"
4. Click Install
5. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
6. Type "Color Theme" and select "Catppuccin Dark Pro"

🔧 Manual Installation (Advanced Users)

1. Clone the repository: git clone https://github.com/catppuccin-dark-pro/vscode.git
2. Navigate to the project directory: cd vscode
3. Install VS Code Extension Manager: npm install -g @vscode/vsce
4. Package the extension: vsce package
5. Install the generated .vsix file: code --install-extension catppuccin-dark-pro-1.0.2.vsix
6. Copy the project folder to your VS Code extensions directory:

7. Restart VS Code and select the theme via Command Palette (Ctrl+Shift+P / Cmd+Shift+P → "Color Theme")

🎨 Activation

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type "Color Theme" and select "Preferences: Color Theme"
3. Select "Catppuccin Dark Pro" from the list
4. Enjoy your new theme!

Syntax Colors (Harmonized Palette)

• Mauve: #cba6f7 - Keywords (class, function, import, if)
• Blue: #89b4fa - Functions, methods, and CSS properties
• Peach: #fab387 - Constants, numbers, and object properties
• Yellow: #f9e2af - Classes, types, and Python decorators
• Red: #f38ba8 - Variables, parameters, and HTML tags
• Green: #a6e3a1 - Strings and string literals
• Teal: #94e2d5 - Regular expressions and CSS values
• Overlay: #7f849c - Comments with elegant italic styling

🧠 Advanced Semantic Highlighting

Intelligent Code Understanding

Catppuccin Dark Pro features 15+ semantic token definitions that work with VS Code's language servers to provide enhanced syntax highlighting that understands your code's meaning, not just its structure.

🌟 Enhanced Language Server Integration

🎯 Why Choose Catppuccin Dark Pro?

🔥 Feature Comparison

🚀 Technical Superiority

• 🎨 Color Science: Every color chosen based on contrast ratios and visual harmony
• ⚡ Performance: Optimized 19.39KB theme file with comprehensive coverage
• 🧠 Semantic Intelligence: Advanced token recognition for better code understanding
• 🔧 Developer Experience: Reduced cognitive load with consistent visual patterns
• 📱 Modern Design: Contemporary flat design principles throughout

⚙️ Technical Implementation Details

🎯 Theme Architecture (v1.0.2)

🎨 Design Philosophy Implementation

• Ultra-Flat UI: All borders set to #00000000 (completely transparent)
• Strategic Transparency: Alpha channels for depth (22%, 33%, 44%)
• Color Temperature Balance: Warm base (#1e1e2e) with cool accents
• Semantic Consistency: Colors maintain meaning across all contexts
• WCAG Compliance: All text meets AA accessibility standards

🎛️ Customization & Settings

🎛️ Recommended VS Code Settings

Enhance your experience with these optimized settings:

{
  // 🧠 Enhanced theme integration
  "editor.semanticHighlighting.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "terminal.integrated.minimumContrastRatio": 1,

  // ✨ Smooth visual experience
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "workbench.list.smoothScrolling": true,
  "editor.smoothScrolling": true,

  // 📖 Enhanced readability
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",

  // 🎨 Theme-specific optimizations
  "workbench.colorTheme": "Catppuccin Dark Pro",
  "workbench.iconTheme": "catppuccin-mocha",
  "editor.minimap.enabled": true,
  "editor.minimap.showSlider": "always"
}

🎨 Color Customization

Personalize specific colors in your settings.json:

{
  "workbench.colorCustomizations": {
    "[Catppuccin Dark Pro]": {
      "editor.background": "#1a1a2e",           // Darker background
      "activityBar.background": "#16213e",      // Custom activity bar
      "statusBar.background": "#1e1e2e",        // Match editor background
      "titleBar.activeBackground": "#181825"    // Subtle title bar
    }
  },
  "editor.tokenColorCustomizations": {
    "[Catppuccin Dark Pro]": {
      "comments": "#6c7086",                    // Dimmer comments
      "strings": "#a6e3a1",                     // Brighter strings
      "keywords": "#cba6f7",                    // Enhanced keywords
      "functions": "#89b4fa"                    // Vibrant functions
    }
  }
}

🤝 Contributing & Development

We welcome contributions from the community! Here's how you can help improve Catppuccin Dark Pro:

🐛 Bug Reports

• Use our GitHub Issues
• Include screenshots and VS Code version
• Specify the programming language if syntax-related

💡 Feature Requests

• Suggest new language support
• Propose UI improvements
• Request color palette enhancements

🎨 Development Setup

# Clone the repository
git clone https://github.com/catppuccin-dark-pro/vscode.git
cd vscode

# Install VS Code Extension Manager
npm install -g @vscode/vsce

# Package the extension
vsce package

# Install locally for testing
code --install-extension catppuccin-dark-pro-1.0.2.vsix

🔧 Theme File Structure

themes/catppuccin-dark-pro-color-theme.json
├── semanticTokenColors (15 definitions)
├── tokenColors (190+ rules)
│   ├── Comments & Documentation
│   ├── Strings & Literals
│   ├── Keywords & Operators
│   ├── Functions & Methods
│   ├── Classes & Types
│   ├── Variables & Parameters
│   └── Language-Specific Rules
└── colors (50+ UI elements)
    ├── Editor Interface
    ├── Activity & Status Bars
    ├── Panels & Sidebars
    └── Terminal & Git Integration

📄 License & Acknowledgments

📜 License

This theme is licensed under the MIT License.

🙏 Special Thanks

• Catppuccin - For the beautiful color palette and UI inspiration
• One Dark Pro - For the excellent syntax highlighting foundation
• VS Code Community - For continuous feedback and support

🎉 Enjoy Catppuccin Dark Pro!

The perfect fusion of aesthetics and functionality for the modern developer

Made with ❤️ by the developer community, for the developer community