A professional dark theme for VS Code inspired by IBM's Carbon Design System. Features enterprise-grade colors, accessibility compliance, and modern syntax highlighting.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A professional dark theme for Visual Studio Code inspired by IBM's Carbon Design System. This theme brings the sophisticated color palette and design principles of IBM's enterprise design system to your coding environment.
Preview
Features
🎨 Carbon Design System Colors
Blue Core: Primary interactive elements using IBM's signature blue (#0f62fe)
Layered Grays: Multi-level gray system for clear visual hierarchy
Support Colors: Consistent error (#da1e28), success (#24a148), warning (#f1c21b), and info (#0043ce) colors
Professional Palette: Enterprise-grade color combinations for optimal readability
🌟 Design Principles
Accessible: Follows WCAG contrast standards (3:1 and 4.5:1 ratios)
Consistent: Unified color language across all UI elements
Professional: Enterprise-quality design suitable for professional development
Modern: Balances human-centric design with digital-first aesthetics
🚀 Syntax Highlighting
Functions: Carbon blue (#4589ff) for clear function identification
Keywords: Carbon purple (#be95ff) for language constructs
Strings: Carbon green (#24a148) for string literals
Numbers: Carbon yellow (#f1c21b) for numeric values
Comments: Subtle gray (#6f6f6f) with italic styling
Operators: Carbon cyan (#82cfff) for logical operators
📋 UI Components
Activity Bar: Clean dark background with IBM blue accents
Side Bar: Layered gray system for clear content organization
Status Bar: IBM blue primary color for important status information
Terminal: Full ANSI color support with Carbon color mappings
Editor: Optimized background colors for extended coding sessions
Installation
From VS Code Marketplace
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Carbon Design System Theme"
Click Install
Go to File > Preferences > Color Theme
Select "Carbon Design System Theme"
Manual Installation
Download the theme files
Copy to your VS Code extensions folder:
Windows: %USERPROFILE%\.vscode\extensions\
macOS: ~/.vscode/extensions/
Linux: ~/.vscode/extensions/
Restart VS Code
Select the theme from File > Preferences > Color Theme
Color Palette
Primary Colors
Color
Hex
Usage
Blue 60
#0f62fe
Primary interactive, buttons, links
Blue 50
#4589ff
Functions, methods
Blue 40
#78a9ff
Classes, types
Blue 30
#a6c8ff
Light blue accents
Support Colors
Color
Hex
Usage
Red 60
#da1e28
Errors, invalid states
Green 50
#24a148
Success, strings
Yellow 30
#f1c21b
Warnings, numbers
Purple 40
#be95ff
Keywords, JSON keys
Background & Text
Color
Hex
Usage
Gray 100
#161616
Editor background
Gray 90
#262626
Sidebar, panels
Gray 80
#393939
Active tabs, selections
Gray 10
#f4f4f4
Primary text
Gray 60
#6f6f6f
Comments, secondary text
Language Support
This theme provides optimized syntax highlighting for:
JavaScript/TypeScript: Enhanced function and class highlighting
Python: Clear distinction between functions, classes, and keywords
HTML/CSS: Proper tag and property differentiation
JSON: Multi-level key coloring for nested structures
Markdown: Structured heading and formatting support
And many more...
Contributing
We welcome contributions! If you have suggestions for improvements or find any issues:
Fork the repository
Create a feature branch
Make your changes
Submit a pull request
Credits
IBM Carbon Design System: Color palette and design principles
IBM Design Language: Typography and visual hierarchy guidelines
Carbon Design System Documentation: Token system and accessibility standards
License
This theme is released under the MIT License. See LICENSE file for details.
Changelog
v1.0.0
Initial release based on Carbon Design System
Complete color token mapping
Full syntax highlighting support
Accessibility compliance
Professional UI theming
Enjoy coding with the professional elegance of IBM's Carbon Design System! 🎨✨
