Tinto
Instantly distinguish between VS Code workspaces with automatic, deterministic color tinting.
Never lose track of which project you're working on! Tinto automatically assigns a unique, consistent color to each workspace's title bar, activity bar, and status bar based on the folder name. Each project gets its own visual identity.
✨ Features
🎨 Automatic Color Assignment
- Deterministic: Same workspace folder always gets the same color
- Unique: Each workspace gets a visually distinct color
- Consistent: Colors persist across VS Code restarts and sessions
🎯 Smart Design
- Accessible: Automatically chooses high-contrast text (black/white) for readability
- Workspace-Scoped: Colors are saved per-project in
.vscode/settings.json
- Performance-Optimized: Activates after startup for zero impact on launch time
🛠 Customizable
- Lock Colors: Override with your preferred hex color per workspace
- Adjustable: Fine-tune saturation and lightness to your preference
- Toggle: Easy enable/disable without uninstalling
🌐 Universal Compatibility
- Local Development: Works with standard VS Code workspaces
- Remote Development: Full support for Remote-SSH, Remote-WSL, and Remote-Containers
- Multi-Root: Intelligently handles multi-root workspaces (uses first folder)
🚀 Quick Start
- Install from the VS Code Extensions marketplace
- Open any workspace - colors apply automatically!
- Customize via VS Code settings if desired
That's it! Your workspaces are now visually distinct.
⚙️ Configuration
| Setting |
Type |
Default |
Description |
workspaceTint.enable |
boolean |
true |
Enable/disable automatic workspace tinting |
workspaceTint.lockColor |
string |
"" |
Override color for this workspace (e.g., #0A84FF) |
workspaceTint.saturation |
number |
0.6 |
Color saturation (0.2-1.0) |
workspaceTint.lightness |
number |
0.22 |
Color lightness (0.1-0.5) |
🎮 Commands
Access these commands via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
Tinto: Assign/Refresh Color - Manually trigger color assignmentTinto: Clear Workspace Colors - Remove all workspace color customizations
💡 How It Works
Tinto uses a cryptographic hash function (FNV-1a) to convert your workspace folder name into a consistent hue value. This ensures:
- Same folder name = Same color, always
- Different folders = Different colors, guaranteed
- No conflicts between similar project names
The extension then applies accessibility-compliant foreground colors and saves everything to your workspace settings.
🔧 Development
Prerequisites
- Node.js 16+
- VS Code 1.80+
Setup
git clone https://github.com/Michael-A-Kuykendall/tinto.git
cd tinto
npm install
npm run build
Testing
Press F5 in VS Code to launch an Extension Development Host with the extension loaded.
📄 License
MIT License - see LICENSE for details.
👨💻 Developer
Michael A Kuykendall
📧 michaelallenkuykendall@gmail.com
🐙 GitHub
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
⭐ Show Your Support
If you find this extension helpful, please:
