Quick Start
Install the VSIX:
code --install-extension otak-statusline-0.0.3.vsix
Or run Extensions: Install from VSIX... from the VS Code Command Palette.
Open a repository as a single-folder workspace.
Click the $(paintcan) icon on the right side of the status bar.
Choose a color from Quick Pick.
The selected color is applied to both the normal and debugging status bars.
Choose Custom color... to enter #RRGGBB or #RRGGBBAA.
Features
- Stable directory colors: assigns a deterministic color based on the directory path, so reopening the same directory keeps its color.
- Collision-aware palette: avoids reusing automatic colors among known directories. After the configured palette is exhausted, it generates another color from the path.
- One-click palette: open the palette any time from the paint-can icon in the lower-right status bar.
- Team-shareable colors: selected and automatic colors are written to workspace settings as
otakStatusline.color.
- Debug-aware: keeps normal and debugging status bars in the same color family.
- Readable foreground: automatically chooses white or dark text for contrast.
- Safe reset: choose Use automatic directory color or run
Statusline: Use Automatic Directory Color.
- Custom palette: change the automatic-color palette with
otakStatusline.palette.
- Preserves other customizations: retains existing
workbench.colorCustomizations keys and updates only the status-bar keys it owns.
Share a Color with Your Team
For a normal single-folder workspace, the color is stored in the repository's
.vscode/settings.json. The automatic color is saved the first time the directory is shown.
Example:
{
"otakStatusline.color": "#4F46E5",
"workbench.colorCustomizations": {
"statusBar.background": "#4F46E5",
"statusBar.foreground": "#FFFFFF",
"statusBar.debuggingBackground": "#4F46E5",
"statusBar.debuggingForeground": "#FFFFFF"
}
}
Commit this file to Git and every teammate with the extension installed will see the same color. A repository-level otakStatusline.color takes precedence over a teammate's local automatic assignment.
If the color should remain local, do not commit otakStatusline.color or the related workbench.colorCustomizations entries.
Multi-root Workspaces
The VS Code status bar is window-scoped, so different roots cannot display separate colors at the same time. For reliable per-repository colors, open each repository in a single-folder VS Code window.
Commands
| Command |
Description |
Statusline: Choose Directory Color |
Open the palette for the current directory. |
Statusline: Use Automatic Directory Color |
Return the current directory to its stable automatic color. |
Clicking the status-bar icon runs the first command.
Settings
| Setting |
Default |
Description |
otakStatusline.color |
none |
Shared workspace color. Accepts #RRGGBB or #RRGGBBAA. |
otakStatusline.palette |
12 colors |
Six-digit HEX colors used for automatic assignments. Existing assignments stay until reset. |
Publishing
The package contains release commands for both the Visual Studio Marketplace and the Open VSX Registry. The extension publisher is odangoo, matching the publisher field in package.json. Register that publisher ID with both registries before the first release.
Local publish
Create tokens in each registry and keep them outside the repository. In PowerShell, set them for the current terminal only:
$env:VSCE_PAT = "<visual-studio-marketplace-token>"
$env:OVSX_PAT = "<open-vsx-token>"
npm run package:vsix
npm run deploy
npm run deploy:ovsx
Both publish commands use --skip-duplicate, so retrying a release does not fail when that version is already present.
GitHub Actions release
The workflow in .github/workflows/publish.yml runs on a v* tag or from Run workflow. Add VSCE_PAT and OVSX_PAT as GitHub Actions secrets, then push a version tag after updating package.json and CHANGELOG.md:
git tag v0.0.3
git push origin v0.0.3
The workflow type-checks, tests, packages a VSIX artifact, and publishes the same VSIX to both registries.
Development
npm install
npm run compile
npm test
npm run package
Press F5 in VS Code to start an Extension Development Host. The entry point is src/extension.ts; the color-assignment logic is in src/color.ts; the editable icon source is images/icon.svg.
Privacy
This extension does not connect to external services. Color settings are stored in VS Code workspace settings, and automatic-assignment bookkeeping is stored in VS Code's local extension state. It does not read project contents or file bodies.
License
MIT