Add Amber CRT, Teletype and Dot Matrix retro themes

[parsakhaz]

Summary

Three new colour themes in the retro computing & hardware direction: amber-crt (amber-phosphor CRT, dark), teletype (1970s beige-and-brown "terminal on paper", light) and dot-matrix (monochrome-green early LCD, dark). Retro is the palette and hierarchy only — no scanlines, no filters, no new dependencies.

Complete: every theme overrides the full token set (chrome, shells, buttons, inputs, focus rings, status, scrollbars, terminal palette, Monaco), works with the additive high-contrast mode, and passes a new WCAG contrast gate (61/61 pairs each, with and without high contrast).

Beyond the three themes, this PR also carries small shared changes a cherry-picker should know about — a isLightTheme() helper replacing four hard-coded light-id checks (only teletype needs it; it is what gives a new light id the light diff/editor/log palettes), THEME_CLASSES moved from ThemeProvider.tsx into themeContextValue.ts, an optional description prop on ui/Select's SelectItem, a pnpm theme:contrast script and an opt-in pnpm theme:screenshots Playwright spec. Existing themes are not gated by the script and their behaviour is unchanged. Details under What changed.

Lane: light: simple-plan → prepare-pr. Batch context: one of five parallel panes, each adding three themes in a different direction.

The themes

id	name	base	vibe	bg · surface · text · accent · terminal bg	screenshot (repo path)
amber-crt	Amber CRT	dark	Amber-phosphor monitor on black-brown glass: single amber hue ramp, dark text on the accent, faint amber shell glow	#140f08 · #1b140a · #f0d9a8 · #ffb000 · #0c0905	screenshots/themes/amber-crt.png
teletype	Teletype	light	Brown ink on warm off-white paper; burnt-orange interactive, olive success; Braun-style rounded, islanded shells	#f5efe2 · #fbf8f1 · #2b2116 · #b5451b · #f3ecdc	screenshots/themes/teletype.png
dot-matrix	Dot Matrix	dark	Early handheld LCD: deep olive-black, 4-step green ramp, tight pixel radii, no shadows, one hot coral accent reserved for errors	#10150c · #161d10 · #dcecb0 · #8bac0f · #0a0d08	screenshots/themes/dot-matrix.png

Shell patterns: teletype uses the light-rounded pattern (islanded, rounded shells on a beige frame); amber-crt and dot-matrix use the dusk/terracotta two-tone pattern (chrome on bg-primary, editor and terminal sunken to the near-black -950 step), so an OLED variant would only need to drop those two steps to pure black.

Try them: check out the branch, pnpm dev, Settings → Appearance → Theme (or the Home page Preferences dropdown).

Amber CRT

Teletype

Dot Matrix

Appearance picker (descriptions render under the label)

Every capture shows the sidebar, a pane with the Review diff open, and the bottom terminal printing the 16 ANSI colours. They were driven through the existing Playwright + electronApiMock tooling — a mocked session, not a live agent — and are committed under screenshots/themes/ (the inline images above are the same files pinned to commit d95941b).

What changed

Per theme (tokens and CSS)

• colors.css: primitives (--crt-*, --tty-*, --lcd-*), full :root.<theme> blocks (same token set as terracotta for the dark pair, as light for teletype), and :root.high-contrast.<theme> blocks at ~7:1.
• effects.css / spacing.css: per-theme radii, shadows, density.
• index.css: structural shell selectors, tab underline, xterm radius, body backgrounds, Monaco --vscode-* overrides (teletype's block sits after :root.light so it wins the cascade). frontend/src/styles/monaco-overrides.css is untouched — nothing imports it; the live Monaco overrides are the ones in index.css.

Shared registration (all three ids added to the same lists)

• themeContextValue.ts (Theme union, THEME_CLASSES moved here from ThemeProvider.tsx, new isLightTheme()), ThemeProvider.tsx, the two pre-React bootstrap scripts in frontend/index.html, frontend/src/types/config.ts, main/src/types/config.ts.
• Pickers — AppearanceSettings THEMES entries with a one-line description, rendered through a new optional description prop on ui/Select's SelectItem (outside ItemText, so the trigger still shows only the label). HomePage dropdown entries use the Dropdown's existing description.

Touches existing code paths

• Light-base detection — DiffViewer, FileEditor (Monaco vs-dark/light), LogsView (ANSI converter) and usePaneLogo compared theme against the two original light ids; they now use isLightTheme(theme), so teletype gets the light diff/editor/log palettes. No change for existing themes.

New tooling

• Contrast gate — scripts/check-theme-contrast.mjs (pnpm theme:contrast [--high-contrast] [theme…]). PR fix: restore contrast correction for themes and CLI output, add high-contrast mode #362 fixed contrast by hand; there was no script to extend, so this is new. It is a manual/pre-PR check — not wired into pnpm lint or CI.
  • Parses colors.css, resolves var(), composites rgba() over the surface it sits on (bg-primary, or the navigation surface for sidebar pairs), and checks 61 pairs per theme: text tiers on bg/surface/card/modal, buttons (all states), inputs, nav, status + text-on-status, focus ring, terminal fg/cursor/16 ANSI colours.
  • An unresolved token counts as a failure (a half-theme cannot pass by omission).
  • Deliberately skips --color-text-disabled (WCAG 1.4.3 exempts disabled controls, per the note in colors.css) and 1px borders.
  • All three themes pass with and without high contrast. Existing themes are not gated (several fail pairs the repo has never held them to — run without args to see).
• Screenshots — tests/theme-screenshots.spec.ts, opt-in via pnpm theme:screenshots (PANE_THEME_SCREENSHOTS=1); skipped in the normal suite. tests/accessibility.spec.ts theme-trigger regex extended.

Verification

• pnpm lint, pnpm typecheck — clean.
• pnpm theme:contrast amber-crt teletype dot-matrix and --high-contrast — 61/61 pairs each.
• pnpm theme:screenshots — 4/4 pass, output committed.
• tests/settings.spec.ts + tests/accessibility.spec.ts — 27 pass; the one failure (discards remote subview drafts…) also fails on a clean checkout of main, unrelated.

Pre-merge testing

• Switch to each theme from Settings → Appearance and from the Home page dropdown; no flash of light-rounded on reload (bootstrap lists are in sync).
• Teletype: Monaco editor and the Review diff render in their light palettes; logs panel readable.
• Toggle High contrast on each theme — muted sidebar text steps up, hue preserved.
• Run a Claude/Codex session in each theme and read dim (SGR 2) output in the terminal.

Notes for the batch aggregation

• Ids: amber-crt, teletype, dot-matrix.
• Review: Claude implementation-reviewer ran (no must-fix; its should-fix items are folded into commit 2ff2a58 Tighten theme contrast gate and screenshot fixture after review). The Codex lane was unavailable (usage limit).
• Known follow-ups it flagged, not in scope here: Monaco syntax-token colours and the Logs panel ANSI palette are still the generic light/dark sets in every theme (pre-existing); THEME_CLASSES is mirrored by hand in index.html and the contrast script with no sync test.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[github-actions]

React Doctor found 2 new issues in 1 file · 2 warnings · score 67 / 100 (Needs work) · 2 fixed · vs main

2 warnings

src/components/panels/editor/FileEditor.tsx

• ⚠️ L63 Many related useState calls prefer-useReducer
• ⚠️ L1195 Many related useState calls prefer-useReducer

_{Reviewed by React Doctor for commit d95941b. See inline comments for fixes.}

[parsakhaz]

Superseded by #459 (merged as 867795a), which consolidated all five theme branches — these themes are on main with their palettes unchanged. Closing without merge.