Add Synthwave, Acid Terminal and Tokyo Rain themes by parsakhaz · Pull Request #451 · dcouple/Pane

parsakhaz · 2026-08-18T06:19:30Z

Three new dark themes in the neon / synth / high-energy direction: synthwave, acid, tokyo-rain. One of five parallel theme PRs; ids, names and palettes don't overlap the existing twelve. Every text-bearing color pair is WCAG AA or better — the neon lives on interactive and accent surfaces, the greys carry body copy. Each theme is a complete token set (same tokens as terracotta, plus --color-terminal-selection-bg) and works with the additive High-contrast toggle from #362.

Themes at a glance

id	name	base	vibe	bg	surface	text	accent (primary / secondary)	terminal bg
`synthwave`	Synthwave	dark	deep violet-black, magenta buttons, cyan links/cursor, lavender text	`#120b1f`	`#1a1029`	`#f1eafc`	`#ff5fd7` / `#3de3ff`	`#0b0714`
`acid`	Acid Terminal	dark	charcoal-black, electric lime buttons, amber warnings, sage-grey text	`#111311`	`#171a17`	`#eaf2ea`	`#b4ff3a` / `#ffb020`	`#0a0b0a`
`tokyo-rain`	Tokyo Rain	dark	blue-black, signage-pink buttons, neon blue links, cool grey text	`#0d1120`	`#131a2c`	`#e6ebf4`	`#ff4f9a` / `#5cb3ff`	`#080b16`

Full-size captures are in Screenshots below.

Shell treatment differs too: Synthwave is medium density, soft radii, magenta hairline glow; Acid Terminal is compact and flat, tight radii, lime hairline; Tokyo Rain is spacious, large radii, blue glow. Glow lives only in effects.css tokens (see What changed).

If you're cherry-picking across the five theme PRs

Per-theme, self-contained: the --syn-* / --acid-* / --rain-* primitives and the :root.<id> + :root.high-contrast.<id> blocks in colors.css; the per-theme radii/glow in effects.css, density in spacing.css, and the border-tint / gradient / Monaco blocks in index.css; the picker descriptions in AppearanceSettings and HomePage.
Shared sites every theme addition has to touch (expect overlap with the other four PRs): the Theme union, VALID_THEMES / THEME_CLASSES / class-removal lists, both bootstrap scripts in frontend/index.html, AppConfig.theme in both config.ts files, and the shared selector groups in index.css, and the theme-name regex in tests/accessibility.spec.ts.
One non-theme change: SelectItem gains an optional description prop (column layout only when a description is passed; existing callers unchanged). Needed by the picker descriptions — if another PR adds the same thing, keep one.
No new dependencies. Existing themes' palettes are untouched.

Screenshots

Main view — sidebar, a session with the Review (diff) panel expanded, and a terminal showing ANSI output. Captured at 1440×900 with the repo's Playwright + electronApiMock harness against the Vite dev server. The Playwright spec that produced them is a throwaway and isn't committed; say the word if you'd like it in tests/.

Synthwave

Acid Terminal

Tokyo Rain

Appearance picker — the three entries, each with a one-line description (the Home-page dropdown gets the same three):

Contrast

No pair fails. Thresholds: body-text pairs 4.5:1, UI/large-text pairs 3:1, high-contrast muted tokens 7:1. All 16 ANSI colors were checked against each theme's terminal background — the lowest is red at 6.70:1 (synthwave, tokyo-rain) and 6.78:1 (acid); the rest range 7.5:1 to 17.3:1.

Two decisions worth knowing about:

Bright neon primaries can't carry white text (white on #ff5fd7 is ~2.9:1), so all three themes set --color-text-on-interactive / --color-button-primary-text to a near-black from their own ramp — that pair clears 6.1:1 (tokyo-rain) to 16.3:1 (acid). Links, focus rings and cursors use the second accent (cyan / lime / blue), which sits at 8.4:1 to 15.9:1 on the chrome background.
Acid keeps a distinct soft-cyan --color-status-info (#5ee0d0) so info and warning don't collapse into the same amber.

How the numbers were produced: WCAG 2.x relative-luminance formula, run over the same palette data that generated the CSS. The repo has no committed contrast script (#362 hand-computed its ratios), so the checker lives in the author's scratchpad; its full output is below.

Synthwave (synthwave) — measured ratios

pair	fg	bg	ratio	min
text-primary on bg-primary(900)	`#f1eafc`	`#120b1f`	16.38:1	4.5
text-secondary on bg-primary(900)	`#d5c9ea`	`#120b1f`	12.23:1	4.5
text-tertiary on bg-primary(900)	`#b5a5d6`	`#120b1f`	8.52:1	4.5
text-muted on bg-primary	`#a08fc9`	`#120b1f`	6.65:1	4.5
hc text-muted on bg-primary	`#bcaee0`	`#120b1f`	9.39:1	7
input-placeholder(400) on input-bg(950)	`#8d79b5`	`#0b0714`	5.25:1	4.5
interactive-text on bg-primary	`#3de3ff`	`#120b1f`	12.47:1	4.5
interactive-primary as text on bg-primary	`#ff5fd7`	`#120b1f`	7.20:1	4.5
on-accent text on button-primary	`#14081f`	`#ff5fd7`	7.26:1	4.5
button-secondary-text(200) on button-secondary-bg(700)	`#d5c9ea`	`#2e1d4a`	9.61:1	4.5
button-ghost-text(300) on ghost-hover(800)	`#b5a5d6`	`#221538`	7.56:1	4.5
nav-secondary(300) on nav-hover(850)	`#b5a5d6`	`#1a1029`	8.10:1	4.5
status-success on bg-primary	`#5ee89a`	`#120b1f`	12.33:1	4.5
status-warning on bg-primary	`#ffc857`	`#120b1f`	12.49:1	4.5
status-error on bg-primary	`#ff5c7a`	`#120b1f`	6.46:1	4.5
status-info on bg-primary	`#3de3ff`	`#120b1f`	12.47:1	4.5
terminal fg on terminal bg	`#f1eafc`	`#0b0714`	16.99:1	4.5
terminal red on terminal bg	`#ff5c7a`	`#0b0714`	6.70:1	4.5
terminal green on terminal bg	`#5ee89a`	`#0b0714`	12.79:1	4.5
terminal yellow on terminal bg	`#ffd166`	`#0b0714`	13.81:1	4.5
terminal blue on terminal bg	`#7f9cff`	`#0b0714`	7.68:1	4.5
terminal magenta on terminal bg	`#ff5fd7`	`#0b0714`	7.46:1	4.5
terminal cyan on terminal bg	`#3de3ff`	`#0b0714`	12.92:1	4.5
terminal bright-red on terminal bg	`#ff8aa0`	`#0b0714`	8.91:1	4.5
terminal bright-green on terminal bg	`#8ff5b8`	`#0b0714`	15.09:1	4.5
terminal bright-yellow on terminal bg	`#ffe08a`	`#0b0714`	15.44:1	4.5
terminal bright-blue on terminal bg	`#a6b8ff`	`#0b0714`	10.35:1	4.5
terminal bright-magenta on terminal bg	`#ff8ee6`	`#0b0714`	9.73:1	4.5
terminal bright-cyan on terminal bg	`#86efff`	`#0b0714`	14.98:1	4.5

Acid Terminal (acid) — measured ratios

pair	fg	bg	ratio	min
text-primary on bg-primary(900)	`#eaf2ea`	`#111311`	16.34:1	4.5
text-secondary on bg-primary(900)	`#cbd6cb`	`#111311`	12.46:1	4.5
text-tertiary on bg-primary(900)	`#a3b3a3`	`#111311`	8.47:1	4.5
text-muted on bg-primary	`#8a9c8a`	`#111311`	6.40:1	4.5
hc text-muted on bg-primary	`#a9b9a9`	`#111311`	9.07:1	7
input-placeholder(400) on input-bg(950)	`#778a77`	`#0a0b0a`	5.34:1	4.5
interactive-text on bg-primary	`#c6ff63`	`#111311`	15.90:1	4.5
interactive-primary as text on bg-primary	`#b4ff3a`	`#111311`	15.38:1	4.5
on-accent text on button-primary	`#0a0b0a`	`#b4ff3a`	16.25:1	4.5
button-secondary-text(200) on button-secondary-bg(700)	`#cbd6cb`	`#283028`	9.08:1	4.5
button-ghost-text(300) on ghost-hover(800)	`#a3b3a3`	`#1e221e`	7.32:1	4.5
nav-secondary(300) on nav-hover(850)	`#a3b3a3`	`#171a17`	7.97:1	4.5
status-success on bg-primary	`#7ff26a`	`#111311`	13.16:1	4.5
status-warning on bg-primary	`#ffb020`	`#111311`	10.21:1	4.5
status-error on bg-primary	`#ff6363`	`#111311`	6.41:1	4.5
status-info on bg-primary	`#5ee0d0`	`#111311`	11.60:1	4.5
terminal fg on terminal bg	`#eaf2ea`	`#0a0b0a`	17.26:1	4.5
terminal red on terminal bg	`#ff6363`	`#0a0b0a`	6.78:1	4.5
terminal green on terminal bg	`#7ff26a`	`#0a0b0a`	13.91:1	4.5
terminal yellow on terminal bg	`#ffb020`	`#0a0b0a`	10.78:1	4.5
terminal blue on terminal bg	`#7fb2ff`	`#0a0b0a`	9.12:1	4.5
terminal magenta on terminal bg	`#d99cff`	`#0a0b0a`	9.53:1	4.5
terminal cyan on terminal bg	`#5ee0d0`	`#0a0b0a`	12.25:1	4.5
terminal bright-red on terminal bg	`#ff8f8f`	`#0a0b0a`	8.99:1	4.5
terminal bright-green on terminal bg	`#a8f797`	`#0a0b0a`	15.41:1	4.5
terminal bright-yellow on terminal bg	`#ffc95c`	`#0a0b0a`	12.92:1	4.5
terminal bright-blue on terminal bg	`#a6c9ff`	`#0a0b0a`	11.66:1	4.5
terminal bright-magenta on terminal bg	`#e6bbff`	`#0a0b0a`	12.13:1	4.5
terminal bright-cyan on terminal bg	`#8fece0`	`#0a0b0a`	14.31:1	4.5

Tokyo Rain (tokyo-rain) — measured ratios

pair	fg	bg	ratio	min
text-primary on bg-primary(900)	`#e6ebf4`	`#0d1120`	15.70:1	4.5
text-secondary on bg-primary(900)	`#c3ccdc`	`#0d1120`	11.62:1	4.5
text-tertiary on bg-primary(900)	`#9facc3`	`#0d1120`	8.19:1	4.5
text-muted on bg-primary	`#8896b3`	`#0d1120`	6.31:1	4.5
hc text-muted on bg-primary	`#a7b3cb`	`#0d1120`	8.90:1	7
input-placeholder(400) on input-bg(950)	`#74839f`	`#080b16`	5.13:1	4.5
interactive-text on bg-primary	`#5cb3ff`	`#0d1120`	8.36:1	4.5
interactive-primary as text on bg-primary	`#ff4f9a`	`#0d1120`	6.11:1	4.5
on-accent text on button-primary	`#0d1120`	`#ff4f9a`	6.11:1	4.5
button-secondary-text(200) on button-secondary-bg(700)	`#c3ccdc`	`#242e4a`	8.30:1	4.5
button-ghost-text(300) on ghost-hover(800)	`#9facc3`	`#1a2238`	6.89:1	4.5
nav-secondary(300) on nav-hover(850)	`#9facc3`	`#131a2c`	7.56:1	4.5
status-success on bg-primary	`#4ee0a3`	`#0d1120`	11.19:1	4.5
status-warning on bg-primary	`#ffc45c`	`#0d1120`	11.90:1	4.5
status-error on bg-primary	`#ff5f7a`	`#0d1120`	6.41:1	4.5
status-info on bg-primary	`#5cb3ff`	`#0d1120`	8.36:1	4.5
terminal fg on terminal bg	`#e6ebf4`	`#080b16`	16.41:1	4.5
terminal red on terminal bg	`#ff5f7a`	`#080b16`	6.70:1	4.5
terminal green on terminal bg	`#4ee0a3`	`#080b16`	11.70:1	4.5
terminal yellow on terminal bg	`#ffc45c`	`#080b16`	12.43:1	4.5
terminal blue on terminal bg	`#5cb3ff`	`#080b16`	8.74:1	4.5
terminal magenta on terminal bg	`#ff6fb0`	`#080b16`	7.62:1	4.5
terminal cyan on terminal bg	`#4fe0e6`	`#080b16`	12.28:1	4.5
terminal bright-red on terminal bg	`#ff8da1`	`#080b16`	8.95:1	4.5
terminal bright-green on terminal bg	`#84ecbf`	`#080b16`	13.77:1	4.5
terminal bright-yellow on terminal bg	`#ffd68a`	`#080b16`	14.24:1	4.5
terminal bright-blue on terminal bg	`#8ecbff`	`#080b16`	11.34:1	4.5
terminal bright-magenta on terminal bg	`#ff9bc9`	`#080b16`	10.08:1	4.5
terminal bright-cyan on terminal bg	`#8aecf0`	`#080b16`	14.34:1	4.5

What changed, file by file

Registration: Theme union (themeContextValue.ts), VALID_THEMES / THEME_CLASSES / class-removal lists (ThemeProvider.tsx), both pre-React bootstrap scripts in frontend/index.html, AppConfig.theme in frontend/src/types/config.ts and main/src/types/config.ts (both sites).
colors.css: --syn-*, --acid-*, --rain-* primitives; full :root.synthwave / :root.acid / :root.tokyo-rain blocks (every variable :root.terracotta overrides, plus terminal selection); :root.high-contrast.<id> blocks lifting the muted family to ≥7:1.
effects.css: per-theme radii and the glow. Glow is expressed only as --panel-shell-glow / --panel-shell-shadow tokens here; the theme-specific blocks in index.css set border tint only, no box-shadow literals.
spacing.css: density per theme (synthwave medium, acid compact, tokyo-rain spacious).
index.css: the three ids join the underline tab-indicator group and every shared shell selector group; border tint blocks; xterm radius; Monaco --vscode-editor-* vars; subtle body gradient for synthwave and tokyo-rain (existing ember/aurora pattern). monaco-overrides.css mirrors the Monaco vars (that file isn't imported today; index.css carries the live copy).
Pickers: SelectItem gains an optional description prop (column layout only when a description is passed, so existing callers are unchanged); the three themes get descriptions in AppearanceSettings and the HomePage dropdown.
tests/accessibility.spec.ts: the theme-trigger name regex (two places) gains Synthwave|Acid Terminal|Tokyo Rain — another shared site the other theme PRs will touch.
screenshots/themes/: synthwave.png, acid.png, tokyo-rain.png, appearance-picker.png.

Testing

pnpm lint and pnpm typecheck green.
Playwright: tests/settings.spec.ts + tests/accessibility.spec.ts — 27 pass; the one failure (discards remote subview drafts and rebaselines a completed host setup) fails identically on main with the changes stashed, so it's pre-existing and unrelated.
A throwaway spec booted each theme with and without highContrast and asserted --color-text-muted resolves to the AA value normally and the ≥7:1 value under .high-contrast, and that --color-terminal-bg / button text tokens resolve — all six combinations pass.
Manual: switch between the three themes in Settings → Appearance and on the Home page; toggle High contrast on each; open a session with a terminal and the Review panel; confirm primary buttons render dark text on the neon fill.

Lane: light: simple-plan → prepare-pr

Three vivid dark themes with full token coverage (parity with terracotta plus terminal selection), high-contrast blocks, effects/spacing tokens, shell selectors, Monaco vars, and picker entries with descriptions. Every text-bearing pair clears WCAG AA; neon primaries carry dark text. Screenshots under screenshots/themes/.

chatgpt-codex-connector · 2026-08-18T06:19:34Z

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 · 2026-08-18T06:20:05Z

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit afca9ef.}

…families (#459) Consolidates #451, #453, #454, #456 and themes-a11y into one batch: synthwave, acid, tokyo-rain, folio, newsprint, walnut, amber-crt, teletype, dot-matrix, haar, abyss, understory, colorblind-safe, low-fatigue, high-legibility. Pickers read one grouped THEME_OPTIONS list; pnpm theme:contrast gates all 15; pnpm theme:screenshots regenerates screenshots/themes/batch/.

parsakhaz · 2026-08-18T23:00:26Z

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

parsakhaz mentioned this pull request Aug 18, 2026

Add 15 themes: neon, editorial, retro, atmosphere, and accessibility families #459

Merged

6 tasks

parsakhaz closed this Aug 18, 2026

parsakhaz deleted the themes-neon branch August 18, 2026 23:00

Navigation Menu

Uh oh!

Add Synthwave, Acid Terminal and Tokyo Rain themes - #451

Add Synthwave, Acid Terminal and Tokyo Rain themes#451
parsakhaz wants to merge 1 commit into
mainfrom
themes-neon

parsakhaz commented Aug 18, 2026

Uh oh!

chatgpt-codex-connector Bot commented Aug 18, 2026

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

parsakhaz commented Aug 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

parsakhaz commented Aug 18, 2026

Themes at a glance

If you're cherry-picking across the five theme PRs

Screenshots

Contrast

What changed, file by file

Testing

Uh oh!

chatgpt-codex-connector Bot commented Aug 18, 2026

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

parsakhaz commented Aug 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant