Repository navigation
fix(theme): give migrated V1 dialogs an opaque background - #60016
Conversation
![opencodejr[bot]](https://avatars.githubusercontent.com/in/5497873?s=60&v=4){kind=small}
There was a problem hiding this comment.
This looks good. I reproduced the problem with OpenCode Drive by opening the session picker under lucent-orng (dark). On dev the dialog has no background and the session shows through. With this change it gets an opaque #2a1a15 panel. Screenshots are below. The theme and TUI theme tests pass. tsc is clean for packages/theme, and packages/tui has the same errors as on dev.
Public API: unchanged. The only change is in how V1 themes are migrated internally; no theme file format or config keys change.
One small note: in lucent-orng it's backgroundPanel that is fully transparent. The #2a1a1599 value is backgroundMenu, and that's the color the fallback uses, which matches what the test asserts. I have no blocking concerns.
Related: #59628
878a8e2 to
cd4a2f2
Compare
There was a problem hiding this comment.
The new commit applies the opaque-dialog fallback to migrateV1NewDesigns as well, including the light-mode @dialog override. I checked it in OpenCode Drive with lucent-orng (dark) and the new designs experiment on. On dev the session picker has no background, and with this change it gets an opaque panel. Screenshots are below. The theme tests pass, tsc is clean for packages/theme, and packages/tui has the same errors as on dev.
Public API: unchanged. The new exports from v1-migrate.ts are only used inside the package.
I have no new concerns.
Issue for this PR
Closes #
Type of change
What does this PR do?
Migrated V1 themes use
backgroundPanelas the dialog background. In themes with a transparent or translucent panel, likelucent-orng(#2a1a1599/#fff5f099), dialogs had no background of their own. The session underneath showed through, and dialog rows overlapped the text behind them.When
backgroundPanelisn't fully opaque,migrateV1andmigrateV1NewDesignsnow give@dialogan opaque background, including the new designs light dialog override. It uses the first visible surface color (panel, menu, element, then page) at full opacity, and falls back to black or white based on the text color. Themes with an opaque panel are unchanged. Of the built-in themes, onlylucent-orngchanges.How did you verify your code works?
packages/tui/test/theme/v2/v1-migrate.test.tsfor both migrations:lucent-orng, a theme with every surface transparent, and opaque themes keeping their existing dialog tokens.migrateV1andmigrateV1NewDesignsoutput for every other built-in theme matchesdev.bun testfor the theme package and the TUI theme/mini suites, plustsc.devand on this branch (see below).Screenshots / recordings
lucent-orngin OpenCode Drive. Light mode is on a white terminal, since the page is transparent. In each pair,devis on the left and this PR is on the right. The rows are the session picker, command palette, model picker and theme picker.Light, new designs off
Light, new designs on
Dark, new designs off
Other dialogs with this PR (agents, help, MCP servers, status, settings; light with the flag off on the left, dark with it on on the right)
Other themes: I took the same 10 screens (session plus 9 dialogs) on
devand on this branch for github, catppuccin and opencode (light) and tokyonight, gruvbox and opencode (dark), with the flag on and off. That's 240 screenshots in all, compared pixel by pixel. The only differences were run-to-run noise: the elapsed-time labels, the status-bar indicator, and the order of the lower command palette sections.Checklist
Added by the opencode bot (AI-generated).
Related: #59628