JARVIS HUD

A dark VS Code theme built around the holographic HUD aesthetic — arc-reactor cyan glowing off a near-black substrate, with gold and orange for the warm accents.

Design philosophy

The theme treats the editor like a heads-up display: a near-black chrome (#020609) recedes into the background so the code itself appears to float above it, lit from within. The palette is the arc reactor's own — cyan and gold. Cyan carries the language's grammar (keywords, tags), and gold is spent on exactly one thing: the functions you call. In a codebase you mostly navigate by behavior, so the warmest color on screen marks the verbs, and everything you scan past to reach them stays cool.

Everything that isn't carrying meaning is grey. Body text, variables, punctuation and comments sit on a cool neutral ramp, which leaves the saturated colors free to mean something: cyan for the cursor, the active line number, the focused tab and the matching bracket; gold for the functions. The one color your eye is trained to chase always means "you are here" — and because nothing else competes for it, it works.

Install

From the Marketplace

Search for JARVIS HUD in the Extensions view (Cmd+Shift+X), install, then pick it via Cmd+K Cmd+T.

Locally, from source

Copy the extension folder into your VS Code extensions directory:

# macOS / Linux
cp -r "Jarvis HUD" ~/.vscode/extensions/jarvis-hud-1.1.0

# Windows (PowerShell)
Copy-Item -Recurse "Jarvis HUD" "$env:USERPROFILE\.vscode\extensions\jarvis-hud-1.1.0"

Restart VS Code, then open the theme picker with Cmd+K Cmd+T (Ctrl+K Ctrl+T on Windows/Linux) and choose JARVIS HUD.

From a packaged .vsix

vsce package
code --install-extension jarvis-hud-1.1.0.vsix

Publishing

Push the repository before publishing — vsce rewrites the README's relative image paths to absolute github.com/.../raw/HEAD/... URLs, so the preview only renders on the Marketplace once those files exist on the default branch of a public repo.

npm install -g @vscode/vsce   # one-time

vsce package                  # build the .vsix and validate the manifest
vsce login <publisher-id>     # authenticate with a Personal Access Token
vsce publish                  # ship it

You need an Azure DevOps Personal Access Token with Marketplace → Manage scope, and a publisher created at https://marketplace.visualstudio.com/manage.

To bump and publish in one step: vsce publish minor (or patch / major).

Palette

Recommended settings

The theme leans on italics for comments and parameters. To get the most out of it, pair it with a font that has a true italic cut:

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.semanticHighlighting.enabled": true
}

Semantic highlighting is what keeps functions (gold) reliably distinct from keywords (cyan) in TypeScript, Rust, Python and other languages with a semantic token provider.

Regenerating the artwork

Both icon.png and images/preview.png are generated programmatically — no source images are checked in:

python3 -m pip install Pillow
python3 scripts/make_icon.py        # marketplace icon
python3 scripts/make_screenshot.py  # README preview

make_screenshot.py reads its colors straight out of themes/jarvis-hud-color-theme.json, so re-running it after a palette change keeps the preview honest rather than letting it drift out of date.

To swap in a real screenshot instead, capture an editor window with Cmd+Shift+4 (space bar to grab the whole window) and save it over images/preview.png.

License

MIT — see LICENSE.