Product Badge

Display a product icon, name, and tagline in a sidebar panel for instant visual identification of VS Code windows.

Features

• Sidebar badge — icon, name, tagline, and background colour in a dedicated panel
• Emoji or image icons — use an emoji ("icon": "🦙") or a file path ("icon": ".vscode/logo.png")
• Colour bars — title bar, status bar, and activity bar automatically match the badge background
• Config file — share team defaults via .product.json committed to the repo
• VS Code settings — override per-user via standard workspace settings
• Live reload — changes to config or icon files apply instantly, no reload needed
• Multiple views — badge appears in its own Activity Bar container and optionally in the Explorer sidebar

Quick Start

1. Install from the VS Code Marketplace
2. Create .product.json at your workspace root:

{
  "icon": "🦙",
  "name": "Ollama",
  "tagline": "Run LLMs locally",
  "backgroundColor": "#1a1a2e"
}

3. Click the Product Badge icon in the Activity Bar to open the panel. The title bar, status bar, and activity bar update to match your background colour.

Configuration

There are two ways to configure the badge. Use either or both.

Option 1 — Config file (recommended for teams)

Create .product.json at the workspace root:

{
  "icon": "🦙",
  "name": "Ollama",
  "nameColor": "#ffffff",
  "tagline": "Run LLMs locally",
  "taglineColor": "#aaaaaa",
  "backgroundColor": "#1a1a2e"
}

All keys are optional. Commit this file to the repo so every team member sees the same badge — even if .vscode/ is gitignored.

Option 2 — VS Code settings

Add to .vscode/settings.json (or user/workspace settings UI):

{
  "productBadge.icon": "🦙",
  "productBadge.name": "Ollama",
  "productBadge.nameColor": "#ffffff",
  "productBadge.tagline": "Run LLMs locally",
  "productBadge.taglineColor": "#aaaaaa",
  "productBadge.backgroundColor": "#1a1a2e"
}

Precedence

When both exist, VS Code settings win over the config file. This lets a team commit shared defaults via .product.json while individuals override specific values in their own settings.

VS Code setting  >  Config file  >  default (empty)

Colour bars

When a backgroundColor is set, Product Badge automatically applies it to:

• Title bar — active background and foreground
• Status bar — background and foreground
• Activity bar — background, active icon, and inactive icon colours

Foreground colours are calculated automatically for contrast. When backgroundColor is cleared, these customisations are removed and VS Code reverts to your theme defaults.

To manually remove all colour customisations, run the command Product Badge: Reset Colors from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).

Settings reference

Config file schema

The .product.json file supports these properties:

Unknown keys are ignored. Non-string values are ignored. Invalid JSON silently falls back to settings only.

Known limitations

• In multi-root workspaces, only the first workspace folder is used for configuration.

Contributing

Issues and pull requests are welcome at github.com/jamesprnich/product-badge.

License

MIT