🎨 Colorful Workspace Border
Transform your VS Code workspace with automatic technology detection and beautiful color customization!
✨ Features
🔍 Automatic Technology Detection
- Smart Detection: Automatically detects your project's technology stack
- 8 Built-in Technologies: Kotlin, Spring Boot, Ansible, Azure, React, Python, Docker, Terraform
- Custom Technologies: Add your own technology profiles with custom colors
- Pattern Matching: Detects technologies based on file patterns, code annotations, and configuration files
🎨 Beautiful Color Customization
- Technology-Specific Colors: Each technology gets its signature color scheme
- Full UI Customization: Title bar, activity bar, status bar, sidebar, and tabs
- Workspace Naming: Custom workspace names with technology icons
- Real-time Preview: See color changes instantly
🛠️ Advanced Management
- Technology Manager: Full interface to manage technology profiles
- Custom Profiles: Create your own technology detection rules
- Color Mapping: Assign specific colors to different technologies
- Pattern Configuration: Set up custom detection patterns
🚀 Quick Start
1. Auto-Detect Technology Colors
Ctrl+Shift+P → "Auto-Detect Technology Colors"
The extension will automatically:
- Scan your workspace for technology indicators
- Apply the appropriate color scheme
- Set a custom workspace name with technology icon
2. Manual Configuration
Ctrl+Shift+P → "Configure Workspace Colors"
- Choose from predefined technology profiles
- Customize colors manually
- Set workspace name and title
3. Manage Technology Profiles
Ctrl+Shift+P → "Manage Technology Color Mapping"
- Edit existing technology profiles
- Add custom technologies
- Configure detection patterns
- Customize color schemes
🎯 Supported Technologies
| Technology |
Icon |
Primary Color |
Detection Patterns |
| Kotlin |
🟣 |
Purple (#7F52FF) |
*.kt, *.kts, build.gradle.kts |
| Spring Boot |
🍃 |
Green (#6DB33F) |
@SpringBootApplication, application.yml |
| Ansible |
🔴 |
Red (#EE0000) |
*.yml, ansible.cfg, inventory |
| Azure |
☁️ |
Blue (#0078D4) |
azure-pipelines.yml, *.bicep |
| React |
⚛️ |
Cyan (#61DAFB) |
package.json, *.jsx, *.tsx |
| Python |
🐍 |
Blue (#3776AB) |
*.py, requirements.txt, setup.py |
| Docker |
🐳 |
Blue (#2496ED) |
Dockerfile, docker-compose.yml |
| Terraform |
🏗️ |
Purple (#7B42BC) |
*.tf, *.tfvars |
🎨 Color Customization
UI Elements Customized
- Title Bar: Active/inactive background and foreground
- Activity Bar: Background and foreground colors
- Status Bar: Background and foreground colors
- Sidebar: Background and accent colors
- Tabs: Active/inactive tab colors
- Window Title: Custom workspace names with icons
Technology Color Schemes
Each technology comes with a carefully crafted color palette:
- Primary Color: Main brand color for title bar and status bar
- Secondary Color: Supporting color for inactive elements
- Accent Color: Highlight color for activity bar and sidebar
- Background Color: Base color for sidebar and panels
🛠️ Advanced Features
Custom Technology Profiles
Create your own technology profiles with:
- Custom Names: Internal name and display name
- Custom Icons: Emoji or text icons
- Custom Colors: Full color scheme customization
- Detection Patterns: File extensions, keywords, annotations
- Pattern Types: File patterns (
*.vue), code patterns (@Component), exact matches
Pattern Detection Examples
// File patterns
"*.vue", "*.angular", "*.svelte"
// Code patterns
"@Component", "@NgModule", "@SpringBootApplication"
// Configuration files
"package.json", "vue.config.js", "nuxt.config.js"
// Directory patterns
"src/routes/", "pages/", "components/"
📋 Commands
| Command |
Description |
Configure Workspace Colors |
Open the main color picker interface |
Auto-Detect Technology Colors |
Automatically detect and apply technology colors |
Manage Technology Color Mapping |
Open the technology management interface |
🔧 Configuration
Extension Settings
{
"colorfulWorkspaceBorder.enabled": true,
"colorfulWorkspaceBorder.autoApply": true
}
Workspace Profiles
Profiles are automatically saved per workspace and include:
- Workspace name and title
- Color scheme (primary, secondary, accent, background)
- Detected technologies
- Auto-detection status
🎯 Use Cases
Multi-Technology Development
- Kotlin + Spring Boot: Purple and green themes
- React + Node.js: Cyan and blue themes
- Python + Docker: Blue and blue themes
- Terraform + Azure: Purple and blue themes
Team Development
- Consistent Branding: Team members get consistent colors
- Technology Identification: Instantly identify project types
- Workspace Organization: Multiple projects with distinct themes
Custom Workflows
- Company Standards: Custom technology profiles for internal tools
- Client Projects: Different color schemes per client
- Environment Separation: Dev, staging, production color coding
🚀 Installation
From VS Code Marketplace:
Extensions → Search "Colorful Workspace Border" → Install
From VSIX File:
Extensions → ... → Install from VSIX → Select .vsix file
🔄 Updates
The extension automatically:
- Detects workspace changes and applies appropriate colors
- Saves profiles per workspace for persistence
- Updates technology profiles when you modify them
- Maintains settings across VS Code sessions
🤝 Contributing
We welcome contributions! Please see our GitLab repository for:
- Issue Reporting: Bug reports and feature requests
- Pull Requests: Code contributions and improvements
- Documentation: Help improve our documentation
📄 License
This extension is licensed under the MIT License. See LICENSE for details.
🙏 Acknowledgments
- VS Code Team: For the amazing extension API
- Community: For feedback and feature requests
- Technology Communities: For inspiration on color schemes
Made with ❤️ for the VS Code community
