Auto Project Colors

Automatically identify your VS Code projects at a glance. 🎨

Reads your project's favicon and instantly applies its dominant brand color to your VS Code UI—title bar, activity bar, and status bar. Zero configuration. Zero setup.

The Problem

When you're working with multiple VS Code windows across different projects, they look identical. You waste time:

• ⏱️ Searching through windows to find the right project
• 🔄 Context-switching between similar-looking instances
• ❌ Editing the wrong project by mistake

Peacock requires manual color selection. Window Colors uses random hashes. But your projects already have brand identities—favicons.

The Solution

Auto Project Colors works automatically—no configuration needed.

How It Works

1. Detects your project's favicon
2. Analyzes its dominant color
3. Applies that color to VS Code UI automatically

Your workspace instantly reflects your project's branding.

Features

• ✨ Automatic Detection: Works with any favicon without manual setup
• 🎨 Brand-Accurate Colors: Uses your project's actual brand color, not random hashes
• ⚡ Instant Recognition: Visual identification across all VS Code windows
• 🔧 Zero Configuration: Install and it works—no commands, no settings
• 🌈 Multiple Projects: Each project gets its unique brand color
• 💾 Workspace-Aware: Colors persist per VS Code workspace

What Sets It Apart

Quick Start

Installation

1. Open VS Code
2. Go to Extensions (Cmd/Ctrl + Shift + X)
3. Search for "Auto Project Colors"
4. Click Install

That's it. No configuration needed.

Usage

1. Open a project in VS Code
2. The extension automatically detects the project's favicon
3. Your VS Code UI colors update instantly

No commands. No settings to change. Just works.

First Run

When you first open a project:

• Extension scans for favicon.ico or .ico files
• Analyzes the dominant color
• Applies it to title bar, activity bar, and status bar

Colors persist per workspace, so they'll remain consistent when you re-open projects.

Commands

Open the Command Palette with Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux):

Settings

Configure Auto Project Colors in VS Code settings (search for "auto project colors"):

Basic Settings

Icon Detection

Color Customization

UI Elements

Control which parts of VS Code get colored. Tip: Use the "Choose UI Sections to Color" command for quick presets!

Presets Available:

• Minimal – Title bar only (just enough to identify windows)
• Balanced – Title bar + Activity bar + Status bar (recommended)
• Top & Bottom – Title bar + Status bar (clean borders)
• Maximum – Everything (full color immersion)

Default Search Patterns

The extension searches these locations (in order):

[
  "favicon.ico",
  "favicon.png",
  "favicon.svg",
  "public/favicon.ico",
  "public/favicon.png",
  "public/favicon.svg",
  "public/icon.png",
  "app/favicon.ico",
  "app/favicon.png",
  "assets/favicon.ico",
  "assets/favicon.png",
  "assets/icon.png",
  "assets/app-icon.png",
  "src/assets/favicon.png",
  "src/assets/icon.png",
  "static/favicon.ico",
  "static/favicon.png",
  "resources/favicon.ico",
  "resources/icon.png",
  "app/assets/images/favicon.ico"
]

Supported Project Types

Color Styles

Pick a style that matches your vibe:

• Dominant – Uses the color straight from your favicon
• Vibrant – Pumps up the saturation for a bold, eye-catching look
• Muted – Tones it down for a professional, subtle appearance
• Pastel – Soft and easy on the eyes

Use the "Regenerate with Different Strategy" command to switch styles anytime.

Status Bar

Look for your current color code (like #3498db) in the bottom-right status bar. Click it to open the quick actions menu.

FAQ

Q: Does it work with private/corporate projects?

A: Yes. Auto Project Colors scans your local project's favicon. Nothing is sent to the cloud.

Q: What if my project doesn't have a favicon?

A: The extension falls back gracefully. You can manually specify a color in settings (optional).

Q: Can I customize the color?

A: Yes. While automatic detection is the default, you can manually override colors per project if needed.

Q: How is this different from Peacock?

A: Peacock requires manual color selection for each project. Auto Project Colors automatically detects your favicon. Zero setup.

Q: Why is there a color for my project?

A: Your project's favicon already has brand colors. We're just reading what's there—no guessing, no random colors.

Q: Does it slow down VS Code?

A: No. Color detection happens once per project load and is cached.

Q: Will it work with monorepo setups?

A: Yes. Each workspace folder can have its own favicon and color.

Q: Can I disable it for specific projects?

A: Yes. You can disable it per-workspace or globally in settings.

Troubleshooting

Colors not applying automatically

Problem: Extension installed but colors haven't changed.

Solution:

1. Ensure you have a favicon.ico or .ico file in your project root
2. Restart VS Code
3. Open the project folder

If still no color appears:

• Check extension is enabled: Extensions view → Auto Project Colors → Enable
• File → Preferences → Settings → "Auto Project Colors" → Verify enabled

Color detection seems wrong

Problem: Extension detected a color you didn't expect.

Solution:

• The extension analyzes the favicon's dominant color
• If your favicon has multiple colors, the most prevalent one is used
• You can manually override per project in workspace settings

Performance issues

Problem: VS Code running slower after installing.

Solution:

• Extension loads colors from favicon cache
• First project open scans favicon (milliseconds)
• Subsequent opens use cache
• Performance impact: negligible

If you notice slowness, please report an issue.

Extension not showing in Marketplace

Problem: Can't find extension in VS Code extension search.

Solutions:

1. Search for exact name: "Auto Project Colors"
2. Search for keywords: "auto", "project", "identify", "distinguish"
3. Search for publisher name: tomwatts
4. If still not found, check you're on latest VS Code version

SVG files aren't working

SVG support is limited. The extension looks for hex colors in fill/stroke attributes, and if that fails, tries to rasterize the SVG. If neither works, switch to a PNG version of your icon.

Colors aren't showing up

• Make sure you have a workspace folder open (not just loose files)
• Check that projectColor.enabled is true in settings
• Look at View → Output → Auto Project Colors for error messages
• Verify your favicon is PNG, JPG, ICO, WebP, or SVG

Requirements

VS Code 1.70.0 or later. That's it—everything else is bundled.

Known Issues

• SVG color extraction can be hit-or-miss with complex graphics
• Colors might look slightly different on various monitor color profiles
• macOS users: Set "window.titleBarStyle": "custom" in your settings to see title bar colors

License

MIT

Contributing

Contributions welcome! Please open an issue or submit a pull request.

Support

• Issues: GitHub Issues
• Questions: Check FAQ above first
• Feature Requests: Open a GitHub issue with label "enhancement"

Feedback

Found a bug or want a new feature? Open an issue on GitHub.

Made with ❤️ for developers who juggle multiple projects.

Enjoy! 🎨