AlxPro Theme

Black-and-white dark and light themes for web development, with matching colors for VS Code, Cursor and eight terminals.

• Pure black and pure white backgrounds, with white or black text, and a few accents that mean one thing each: pink keywords, green strings, blue values and types, purple functions and properties, and amber kept for props in markup.
• Made for the web stack: TSX, TypeScript, CSS and Tailwind, HTML, JSON, YAML, Markdown, MDX, shell, Vue and Svelte, tested on real files in samples/.
• Shell commands read at a glance: the program is purple, everything it's given is green, and each && or | starts over.
• Readable everywhere: every syntax and terminal text color is at least 4.5:1 (WCAG AA) against its background, checked in CI.
• The same colors in your terminal: Terminal.app, iTerm2, Ghostty, Warp, Windows Terminal, Alacritty, Kitty, WezTerm, and VS Code's own terminal.
• The whole editor is themed: tabs, sidebar, menus, widgets, diff, git and the status bar, so nothing falls back to VS Code's blue and purple.

Install

VS Code

Search for AlxPro Theme in the Extensions view, or:

code --install-extension alxpro.alxpro-theme

A short walkthrough opens after installing: pick dark or light, follow your system, set the font, and match your terminal. Reopen it any time with Welcome: Open Walkthrough… → AlxPro Theme.

Or run Preferences: Color Theme and pick AlxPro Dark or AlxPro Light. To follow the system's appearance:

// settings.json
"window.autoDetectColorScheme": true,
"workbench.preferredDarkColorTheme": "AlxPro Dark",
"workbench.preferredLightColorTheme": "AlxPro Light"

Cursor, Windsurf, VSCodium

These install from Open VSX: search for AlxPro Theme in the Extensions view.

Every release also attaches the .vsix on the Releases page. Install it with Extensions: Install from VSIX….

Terminals

Run this in the terminal you want to theme. It works out which terminal it is, installs both themes there, and tells you the one line to add to turn them on. It never edits your config files.

curl -fsSL https://raw.githubusercontent.com/al-xpro/alxpro-theme/main/install.sh | bash

To name the terminal yourself, add it after bash -s --: terminal-app, iterm2, ghostty, warp, wezterm, kitty, alacritty or vscode. Prefer to do it by hand? Every theme is in themes/, and also zipped on the Releases page.

VS Code's integrated terminal uses the same colors without any setup.

Command colors in your shell

A terminal theme sets the 16 colors. What your shell does with them while you type is your shell's choice. To get the purple command and green arguments in the terminal too:

zsh, with zsh-syntax-highlighting, after it's loaded in ~/.zshrc:

for style in command builtin alias function precommand hashed-command arg0; do
  ZSH_HIGHLIGHT_STYLES[$style]='fg=magenta'
done
for style in default path globbing single-hyphen-option double-hyphen-option \
  single-quoted-argument double-quoted-argument dollar-quoted-argument; do
  ZSH_HIGHLIGHT_STYLES[$style]='fg=green'
done

fish:

set -U fish_color_command magenta
set -U fish_color_param green
set -U fish_color_option green
set -U fish_color_quote green

Recommended settings

The themes are drawn with Geist Mono in mind (brew install --cask font-geist-mono, or download it). A theme can't set a font, so:

// settings.json
"editor.fontFamily": "'Geist Mono', ui-monospace, monospace",
"editor.fontSize": 14,
"editor.lineHeight": 1.7,
"terminal.integrated.fontFamily": "'Geist Mono'"

If you write Tailwind CSS v4, don't use the PostCSS Language Support extension. It replaces VS Code's CSS grammar with one that reads the variables in @theme as HTML tags, so they're colored like tags in every theme. VS Code's own grammar, with the Tailwind CSS IntelliSense extension, colors @theme and :root correctly.

Semantic highlighting is off on purpose, so VS Code colors code exactly as Shiki does on the web. Bracket pair colorization is themed to match the punctuation, so brackets stay plain unless one is unmatched.

The palette

Every value lives in src/palette.ts.

On the web

Your site, blog and docs can match your editor with the alxpro-theme npm package: Shiki themes (for Shiki, rehype-pretty-code, Expressive Code, Fumadocs and Nextra), terminal colors for xterm.js, and every color as a CSS custom property.

npm install alxpro-theme

import { createHighlighter } from "shiki";
import { alxproDark, alxproLight } from "alxpro-theme";

const highlighter = await createHighlighter({
  themes: [alxproDark, alxproLight],
  langs: ["tsx", "css", "bash"],
});
const html = highlighter.codeToHtml(code, {
  lang: "tsx",
  themes: { light: "alxpro-light", dark: "alxpro-dark" },
});

How the themes are made

src/palette.ts            every color, for both themes: syntax, terminal, editor UI
src/formats/vscode.ts     which scopes each syntax role colors, and the editor's UI colors
src/formats/terminals.ts  the 16 terminal colors in each terminal's format
src/formats/npm.ts        the npm package: Shiki themes, terminal colors, CSS variables, types
scripts/build.ts          writes themes/ from the above
scripts/check.ts          contrast, badges, and (on macOS) Terminal.app read-back
themes/, npm/dist/        generated, committed, never edited by hand
samples/, preview/        test files and a page that renders them with the real themes

npm install
npm run build     # regenerate themes/ after editing src/
npm run check     # contrast and file checks
npm run preview   # http://localhost:4321/preview/: hover a token to see its scopes
npm run scopes -- samples/globals.css   # every token's color and scopes, as your VS Code colors them
npm run images    # quick before/after renders of the samples, into dist/renders/
npm run package   # build the .vsix into dist/

To try a change in VS Code, open the repository and press F5. That starts an Extension Development Host with the themes installed. Open samples/ there, and run samples/terminal/show.sh in any terminal to see its colors.

Found a wrong color? Open an issue. Include the scope from Developer: Inspect Editor Tokens and Scopes.

How this was built

The palette was first built for the code blocks on my own site, then published as a standalone theme in October 2026. It's developed in the open with an agentic workflow: I write issues as specs, agents open the pull requests, and I review and merge every change. The rules are in AGENTS.md.

Roadmap

See the open issues. Ideas include a Zed theme, an npm package for Shiki, and submitting the terminal themes to iTerm2-Color-Schemes, which Ghostty ships.

Credits

The colors are inspired by Vercel's Geist design system. This project is not affiliated with or endorsed by Vercel.

License

MIT © 2026 Alex Prostamo