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.
🚀 If Tinto helps you, consider sponsoring — 100% of support goes to keeping it free forever.
- $5/month: Coffee Hero ☕ — Eternal gratitude + name in SPONSORS.md
- $25/month: Developer Supporter 🐛 — Priority bug response + roadmap influence
- $100/month: Corporate Backer 🏢 — Logo in README + release-note recognition
- $500/month: Enterprise Partner 🚀 — Prominent logo + monthly office hours + roadmap input
🎯 Become a Sponsor | See our amazing sponsors 🙏
Thank you to our sponsors: ZephyrCloudIO (Corporate Backer) · alistairheath (Coffee Hero)
- 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
- 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
- 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
- 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)
- 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.
| Setting | Type | Default | Description |
|---|---|---|---|
tinto.enable |
boolean | true |
Enable/disable automatic workspace tinting |
tinto.lockColor |
string | "" |
Override color for this workspace (e.g., #0A84FF) |
tinto.saturation |
number | 70 |
Color saturation percentage (0-100) |
tinto.lightness |
number | 50 |
Color lightness percentage (0-100) |
Access these commands via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
Tinto: Apply Workspace Tint- Manually trigger color assignment (uses locked tint if configured)Tinto: Remove Workspace Tint- Remove all workspace color customizations
Tinto uses a cryptographic hash function (FNV-1a) to convert your workspace identity — either the full path(s) of the folders or the workspace file — 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.
- Node.js 16+
- VS Code 1.80+
git clone https://github.com/Michael-A-Kuykendall/tinto.git
cd tinto
npm install
npm run buildPress F5 in VS Code to launch an Extension Development Host with the extension loaded.
MIT License - see LICENSE for details.
Michael A Kuykendall
📧 michaelallenkuykendall@gmail.com
🐙 GitHub
Contributions are welcome! Please feel free to submit a Pull Request.
If you find this extension helpful, please:
- ⭐ Star the GitHub repository
- 📝 Leave a review on the VS Code Marketplace
- 🐛 Report issues or suggest features
This project is a safe space. Trans rights are human rights.
If you or someone you love needs support:
- The Trevor Project — 24/7 for LGBTQ+ young people. Call 1-866-488-7386 or text START to 678-678
- Trans Lifeline — peer support run by and for trans people. US: 877-565-8860
- 988 Suicide & Crisis Lifeline — call or text 988