Skip to content

Flatten alpha on selection bg tokens before applying themes#37

Merged
nedtwigg merged 1 commit intomainfrom
fix/flatten-selection-alpha
May 1, 2026
Merged

Flatten alpha on selection bg tokens before applying themes#37
nedtwigg merged 1 commit intomainfrom
fix/flatten-selection-alpha

Conversation

@nedtwigg
Copy link
Copy Markdown
Member

@nedtwigg nedtwigg commented Apr 30, 2026

Summary

  • Some themes (Selenized Dark, Solarized Dark, Selenized Light, Solarized Light) ship list.activeSelectionBackground with alpha (e.g. #0096f588) because VSCode renders it as an overlay on the sidebar. MouseTerm uses the same token as a solid AppBar / tab fill, so whatever sat behind the surface bled through — on macOS that produced a bright cyan AppBar in focused state.
  • New flatten-alpha.ts helper composites list.{active,inactive}SelectionBackground over sideBar.background (the surface VSCode itself overlays them on) inside applyTheme, so the materialized --vscode-* vars are opaque and match what VSCode shows in the file tree. Original alpha values are preserved on theme.vars and the snapshot's providedVars for diagnostics.

Test plan

  • pnpm vitest run (304 tests pass, including 7 new flatten-alpha tests covering opaque passthrough, short/long hex, rgba(), unparseable input, and the actual Selenized Dark case)
  • pnpm tsc --noEmit clean
  • Visually verify focused AppBar in Selenized Dark / Solarized Dark / Selenized Light / Solarized Light no longer flashes the underlying chrome through translucent selection color
  • Confirm dockview tabs / TerminalPaneHeader / TodoAlertDialog still look correct in non-affected themes (Default Dark+, Monokai, etc.)

🤖 Generated with Claude Code

Themes like Selenized Dark set list.activeSelectionBackground to a
translucent color (e.g. #0096f588) because VSCode renders it as an
overlay on the sidebar. MouseTerm uses the same token as a solid
AppBar / tab fill, so whatever sat behind the surface bled through —
on macOS that produced a bright cyan AppBar in focused state.

Composite list.{active,inactive}SelectionBackground over
sideBar.background in applyTheme so the materialized vars are opaque
and match what VSCode shows in the file tree.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying mouseterm with  Cloudflare Pages  Cloudflare Pages

Latest commit: 01c3075
Status: ✅  Deploy successful!
Preview URL: https://ddfcdf45.mouseterm.pages.dev
Branch Preview URL: https://fix-flatten-selection-alpha.mouseterm.pages.dev

View logs

@nedtwigg nedtwigg merged commit 7a1a05d into main May 1, 2026
6 checks passed
@nedtwigg nedtwigg deleted the fix/flatten-selection-alpha branch May 1, 2026 05:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant