Claude VSCode Theme
Thoughtful dark theme collection inspired by Claude AI. Features both classic and italic variants with carefully balanced contrast and warm syntax colors to reduce eye strain during long coding sessions.
Part of awesomeclaude.ai
Install Now • View Screenshots
✨ Why Claude Theme?
🎯 Perfect Readability
- WCAG AA+ compliant contrast ratios
- Optimized for long coding sessions
- Reduces eye strain with warm dark colors
🎨 Beautiful Syntax
- Hand-picked colors for each token type
- Supports 16+ programming languages
- Advanced semantic highlighting
|
⚡ Zero Fatigue
- Carefully balanced brightness levels
- Smooth color transitions
- Consistent visual hierarchy
🛠️ Multiple Variants
- Classic & italic variations
- High contrast support
- 4 themes total
|
🎭 Theme Variants
| Theme |
Style |
Description |
Best For |
| Claude Dark |
Classic |
Elegant dark theme with warm tones |
General development, long coding sessions |
| Claude Dark Italic |
✨ Italic |
Same elegance with beautiful italic styles |
Italic font lovers, expressive coding |
| Claude Dark High Contrast |
Classic |
Maximum visibility with vibrant colors |
Accessibility, presentations, bright environments |
| Claude Dark High Contrast Italic |
✨ Italic |
High contrast with stylish italic elements |
Accessibility + italic enthusiasts |
💡 Pro Tip: For the best italic experience, use fonts like 'Maple Mono' or 'Victor Mono' with font weight 500!
🚀 Quick Installation
Method 1: Marketplace (Recommended)
ext install alvinunreal.claude-vscode-theme
Method 2: Manual Install
- Open VSCode
Ctrl+Shift+X (Extensions)- Search "Claude Theme"
- Click Install
Ctrl+K Ctrl+T → Select Claude Dark
Method 3: Settings Sync
Add to your settings.json:
{
"workbench.colorTheme": "Claude Dark",
// For italic lovers (optional)
"editor.fontFamily": "'Maple Mono', 'Victor Mono', 'Fira Code', monospace",
"editor.fontWeight": "500"
}
📸 Screenshots
🖼️ Theme Gallery
Classic Variants
🌃 Claude Dark
Elegant dark theme with warm tones
|
🔆 High Contrast
Enhanced visibility for accessibility
|
✨ Italic Variants
🌃✨ Claude Dark Italic
Expressive coding with beautiful italic styles
📝 Shown with 'Maple Mono' font weight 500
|
🔆✨ High Contrast Italic
Maximum visibility with stylish italic elements
📝 Shown with 'Victor Mono' font weight 500
|
🎨 Color Palette
| Color |
Hex |
Usage |
| 🧡 Crail |
#E07A47 |
Primary accent, brand |
| 🔵 Blue |
#7AB8FF |
Classes, types, interfaces |
| 🟢 Green |
#86E89A |
Strings, markup code |
| 🟣 Purple |
#C79BFF |
Keywords, control flow |
| 🔴 Red |
#FF7A7A |
Errors, important |
| 🟡 Yellow |
#FFDF61 |
Constants, numbers |
🚀 Language Support
First-Class Support
| Frontend |
Backend |
Systems |
Data |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
Advanced Features
- 🎯 Semantic Highlighting: Context-aware syntax colors
- ✨ Italic Variants: Beautiful italic styles for expressive coding
- 🔍 Error Detection: Enhanced error and warning visibility
- 📝 Comment Styling: Intelligent comment formatting with optional italics
- 🌈 Bracket Matching: Smart bracket pair colorization
- 🎨 Font Optimization: Crafted for modern coding fonts like Maple Mono & Victor Mono
We'd love to hear from you! Share your experience with Claude Theme:
- ⭐ Rate the extension in the VS Code marketplace
- 🐛 Report issues through VS Code's built-in feedback system
- 💡 Suggest improvements via GitHub discussions
🛠️ Development
Contributing Guide
# 1. Fork & Clone
git clone https://github.com/your-username/claude-vscode-theme.git
cd claude-vscode-theme
# 2. Install dependencies
npm install
# 3. Make changes to src/theme/
# ...
# 4. Build themes
npm run build
# 5. Test in VSCode
npm run package
# Install the generated .vsix file
# 6. Submit PR
git push origin feature/your-feature
📄 License
MIT License - see LICENSE file for details.
🙏 Acknowledgments
Special thanks to the Catppuccin team for their architectural insights.
Made with 🧡 by AlvinUnreal
If Claude VSCode Theme made your coding experience better, please consider ⭐ starring the repo!
