Esper Themes

High-contrast color themes for Visual Studio Code: the LCARS-inspired LCARS theme, six film themes carried over from Deckard's webview themes, two Bluey themes, Helix, and a generated Q theme.

The root COLOR-ACCESSIBILITY.md file records the approved palette, its theme roles, and the accessibility rationale for each assignment.

The Problems, Output, Debug Console, Ports, and related panel content use the same dark surface as the editor and terminal. Panel section headers retain each theme's identity color through the supported panelSectionHeader.* roles; VS Code's Modern UI top panel strip shares the native panel.background role.

VS Code's Modern UI (workbench.experimental.modernUI) draws the active editor tab's top and bottom strokes only from workbench.colorCustomizations, not from theme files. While Modern UI is on, the extension adds the active theme's tab border colors to that setting under the theme's scope, without replacing values you have set yourself.

Screenshots

Regenerate these with npm run capture:screenshots (or name themes, as in npm run capture:screenshots -- Replicant Q). Each capture opens the sample code in an isolated VS Code Extension Development Host.

LCARS

Q

Replicant

Oblivion

Synthwave

Tomcat

Fellowship

Cooper

Bluey

Bluey Night

Helix

Film themes

Replicant, Oblivion, Synthwave, Tomcat, Fellowship, and Cooper are generated from the palettes of the matching Deckard webview themes. The palettes live in scripts/build-themes.js; after changing one, rebuild the theme files with:

npm run build:themes

The script maps each palette onto the same workbench roles the Q generator uses, and adjusts any text color that falls short of WCAG AA (4.5:1) on its surfaces before writing the theme.

The palettes track Deckard's September 2026 regrade, which softened the fully saturated cyans and greens a step and deepened Fellowship's inks so every text pair in Deckard's own pages reads at 4.5:1.

Bluey themes

Bluey (light) and Bluey Night (dark) are built from the characters' own colors, sampled from the family artwork: navy #040620, purple-navy #403F65, Bluey blue #83BBE3, steel #75A6BE, pale blue #D2EBFD, cream #FFF9D8, gold #EDCE74, Bandit orange #FFB070, Bingo orange #E37A3B, Chilli's brown #9B5E33, and the tongue red #C9504F.

Colors are paired the way the artwork paints them. Measuring which colors actually touch on the characters gives blue with steel, navy with purple-navy, pale blue with steel, blue with pale blue, cream with orange, brown with orange, brown with gold, and gold with pale blue. The themes follow those pairings: the workbench runs along the navy and purple-navy of Bluey's head, code structure (keywords, operators, variables) takes the blues of his body, and literals (strings, numbers, constants, types) take the warm family shared by the muzzles, Chilli and Bingo.

Both are generated by npm run build:themes, so their text colors are darkened or lightened only as far as WCAG AA requires.

Helix

Helix is the Sublime Text theme David wrote in 2020, carried over to VS Code and lived in for years. Its syntax colors are the tmTheme's: steel blue #448AA9 for anything that holds a value (variables, parameters, numbers, constants, storage keywords and HTML attributes), dusty rose #AF8787 for keywords and library calls, red #BF5656 for storage.type, slate #748096 for types, classes, tags and markdown headings, orange #FF8147 for strings, lavender #BD93F9 for functions and the explorer, warm grey #A2A797 for brackets and markdown punctuation, and mint #A5E3D0 for inline code.

The workbench is Replicant's, the same cool near-black ground, so the two themes sit side by side; the string orange carries the activity bar, tab strokes and selections where Replicant's gold does, and the lavender takes the badges. The build lifts only what cannot be read: the comment grey, the steel blue and slate by a step, and the storage.type red.

Like the other fixed themes, it is generated by npm run build:themes.

Theme palette reference

theme-palettes.html is a self-contained page (open it directly in a browser) with an interactive mock VS Code window for every theme, its palette, and a live WCAG contrast table. Regenerate its embedded data after changing a theme:

npm run build:palette-page

Q generated theme

Select Q from Preferences: Color Theme to enable the runtime-generated theme. The extension creates a new dark workbench palette and readable code foregrounds; every generated text pair is required to meet WCAG AA contrast of at least 4.5:1, including the composited backgrounds used by selections and hover states.

While Q is active, click Mon Capitan in the status bar to generate another palette. The same action is available in the Command Palette as Esper Themes: Generate Q Theme. The generated values are stored as Q-scoped VS Code color customizations, so the fixed LCARS theme is not changed.

Saving generated Q themes

While Q is active, run Esper Themes: Save Current Q Theme from the Command Palette and give the palette a name. Run Esper Themes: Pick Saved Q Theme later to restore any saved workbench and syntax palette; saved snapshots are kept in the extension's global storage and do not create separate theme files.

Logo

The Marketplace icon (images/icon.svg, rasterised to images/icon.png) is a folded-paper prism splitting one line into three colours, above the Esper wordmark, with the prism in Synthwave's palette and the wordmark in Esper amber. images/logos/ carries the same icon (esper-themes-<theme>.svg) and the prism on its own (prism-<theme>.svg) in every theme's background, focus, and token colours. The logos folder is left out of the packaged extension.

Development

Open this folder in VS Code and press F5 to launch an Extension Development Host. In that window, use Preferences: Color Theme and select LCARS.

The generated .vscode/launch.json starts the theme with the same Extension Host development-path pattern used by Deckard:

--extensionDevelopmentPath=${workspaceFolder}

Packaging

Package the extension with:

npm ci
npm run package:vsix

Install the resulting VSIX through Extensions: Install from VSIX....

Pull requests and pushes to master are validated and packaged by GitHub Actions. A push to master creates a GitHub Release and attaches the VSIX when the version in package.json has not been released before.