HighCoCo - High Contrast Color Themes

36 high contrast color themes for VS Code across four visual families and nine project accents.

HighCoCo stands for High Contrast Color. The original Neon and RonTron sets are now joined by Codex and CoDazed, so you can keep the same project color language while changing the overall mood of the editor.

Each theme is designed to be instantly identifiable at a glance. Assign a color to each project you work on simultaneously, and the theme follows the repo: when you open the project on any device, the same theme automatically activates.

Theme Families

Theme Palette

Every family shares the same nine accent slots. The family changes how those colors show up in the chrome, panels, comments, and syntax contrast.

Keywords, status bars, and active UI elements use the primary accent. Strings and numeric literals use the contrasting secondary color. Comments stay muted. Every background keeps a deep hue tint so the project color is visible in the chrome, not just in the code.

How to Apply a Theme to a Workspace

Key concept: use HighCoCo: Apply Theme to Workspace instead of the standard VS Code theme picker. This command writes the setting to .vscode/settings.json at workspace scope instead of your user profile, so it travels with the repo.

Step 1 - Install the extension

Option A - From the VS Code Marketplace (once published)

1. Open VS Code
2. Press Ctrl+P / Cmd+P → type ext install Teambotics.highcoco

Option B - From the VSIX file (local install)

1. Build the VSIX (see Building & Packaging)
2. Open VS Code
3. Open the Extensions panel with Ctrl+Shift+X
4. Open the ... menu in the Extensions panel
5. Choose Install from VSIX...
6. Select the generated highcoco-x.x.x.vsix file

Step 2 - Apply to your workspace

1. Open the project folder in VS Code
2. Open the Command Palette with Ctrl+Shift+P / Cmd+Shift+P
3. Run HighCoCo: Apply Theme to Workspace
4. Pick the family and color you want

VS Code writes this entry to .vscode/settings.json:

{
  "workbench.colorTheme": "HighCoCo Codex: Electric Blue"
}

Step 3 - Commit .vscode/settings.json

git add .vscode/settings.json
git commit -m "chore: assign HighCoCo Codex Electric Blue theme to this project"

Anyone who clones or pulls the repo and has the HighCoCo extension installed will see the same workspace theme automatically.

Why It Works

VS Code checks .vscode/settings.json for workspace-level overrides before applying user settings. By writing workbench.colorTheme there, the theme is:

• scoped to this workspace only
• version-controlled alongside the code
• portable across devices as long as the extension is installed

Important: .vscode/settings.json should not be in .gitignore for this feature to work. If your project already ignores .vscode/, remove that rule or add a negation such as !.vscode/settings.json.

Building & Packaging

npm install
npm run compile
npm run package

This generates a VSIX such as highcoco-<version>.vsix, where <version> is the version field in package.json. To publish to the VS Code Marketplace under the Teambotics publisher, run:

npx vsce login Teambotics
npx vsce publish

Requires Node.js 18+ and npm.

Suggested Project -> Color Assignments

Project Documentation Hub

This repository includes supporting documentation for external project coordination tools and release planning:

• docs/project-hub.md — Notion page structure and hub guidance
• docs/retroactive-documentation.md — Retroactive documentation template for Linear and project history
• docs/figma-diagram-instructions.md — Figma diagram guidance and polish instructions
• docs/vsix-release.md — VSIX packaging and Teambotics Marketplace publishing instructions

Use these docs to align the repository vision, track progress externally, and prepare the extension for publishing.

FAQ

Q: Can I use the standard VS Code theme picker instead?
A: Yes, but it writes to your user settings instead of the workspace, so the choice will not be saved in the repo. Use HighCoCo: Apply Theme to Workspace for the repo-aware behavior.

Q: Does every contributor need the extension installed?
A: Yes. Without the extension, VS Code falls back to the default theme and shows a missing theme warning.

Q: Can I change the theme later?
A: Yes. Run HighCoCo: Apply Theme to Workspace again, pick a different family or color, and commit the updated .vscode/settings.json.

Q: What if I want no per-workspace theme?
A: Delete the workbench.colorTheme line from .vscode/settings.json, or set it to your preferred theme name.