HighCoCo — High Contrast Neon Themes

9 high contrast neon themes for VS Code — one unique color per project.

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 Palette

Theme Name	Primary Accent	Background Tint	Secondary
HighCoCo Electric Blue	`#00BFFE` electric blue	Blue-black `#040F20`	Gold `#FFD700`
HighCoCo Neon Pink	`#FF2DF7` neon pink	Violet-black `#1A001F`	Cyan-green `#00FFB8`
HighCoCo Lime	`#39FF14` neon lime	Pitch-green-black `#021F00`	Hot pink `#FF00AA`
HighCoCo Hot Orange	`#FF6B00` hot orange	Amber-black `#1F0D00`	Cool blue `#00CFFF`
HighCoCo Neon Violet	`#BF5FFF` neon violet	Indigo-black `#10001F`	Gold `#FFDF00`
HighCoCo Cyan	`#00FFE5` neon cyan	Teal-black `#001F1D`	Orange `#FF6B00`
HighCoCo Gold	`#FFD700` neon gold	Bronze-black `#1F1900`	Violet `#8060FF`
HighCoCo Magenta	`#FF0090` neon magenta	Berry-black `#1F0015`	Mint `#00FFAA`
HighCoCo Neon Red	`#FF0040` neon red	Crimson-black `#1F000A`	Cyan `#00FFE0`

Each theme colors keywords, status bar, and active UI elements with the primary accent. Strings and numeric literals use the contrasting secondary color. Comments are muted. All backgrounds carry a deep hue tint so the color is visible even in the chrome — not just 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 (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)

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

Option B — From the VSIX file (local install)

Build the VSIX (see Building & Packaging)
Open VS Code
Open the Extensions panel (Ctrl+Shift+X)
Click the ··· menu (top-right of Extensions panel) → Install from VSIX…
Select the generated highcoco-x.x.x.vsix file

Step 2 — Apply to your workspace

Open the project folder in VS Code (File → Open Folder)
Open the Command Palette: Ctrl+Shift+P / Cmd+Shift+P
Type HighCoCo: Apply Theme to Workspace and press Enter
Select your theme from the list

The theme is immediately applied. VS Code writes this entry to .vscode/settings.json:

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

Step 3 — Commit `.vscode/settings.json`

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

That's it. Everyone who clones or pulls this repo — and has the HighCoCo extension installed — will see the same theme automatically when they open the project.

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 — your other projects keep their own themes.
Version-controlled — the theme choice lives alongside the code.
Device-independent — as long as the extension is installed, any machine shows the same theme.

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: !.vscode/settings.json.

Building & Packaging

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Package as VSIX
npm run package
# → generates highcoco-1.0.0.vsix

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 Type	Suggested Theme
Frontend / UI	Electric Blue or Cyan
Backend / API	Hot Orange or Gold
Infrastructure / DevOps	Lime
Machine Learning / Data	Neon Violet
Mobile	Neon Pink or Magenta
Security / Auth	Neon Red
Documentation	Gold
Experimental / Side project	Any remaining color

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 — not the workspace — so the choice won't be saved in the repo and others won't see it. 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 will fall back to the default theme and show a missing theme warning. The extension is lightweight (themes only, no runtime overhead).

Q: Can I change the theme later?
A: Yes — run HighCoCo: Apply Theme to Workspace again and pick a different theme, then 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.

HighCoCo – High Contrast Neon Themes

Teambotics