tui: fix missing light variants, invisible borders, and token typos in packages/tui #50523

Activity

1. github-actions

   assigned

   kommander

   on Sep 22, 2026
2. github-actions commented on Sep 22, 2026

   

   github-actionsBot

   on Sep 22, 2026 – with GitHub Actions

   Contributor

   More actions

   This issue might be a duplicate of (or closely related to) an existing issue filed by the same author. Please check:

   • desktop: fix theme palette bugs, light-mode contrast failures, and token typos in packages/ui #50500: Comprehensive audit of background seed defects, contrast failures, and token typos — covers many of the same themes and bugs (catppuccin-frappe hex typos, kanagawa light mode failures, dark-only theme handling), but targeting the Desktop app themes rather than TUI themes.

   If these are intentionally separate reports (Desktop vs TUI), please clarify that distinction so maintainers can track them independently.
3. gotenksIN

   changed the title [-][Bug]: TUI themes: missing official light variants, zero-contrast borders, and palette bugs[/-] [+]tui: fix missing light variants, invisible borders, and token typos in packages/tui[/+] on Sep 22, 2026
4. opencodejr commented on Oct 28, 2026

   

   opencodejrBot

   on Oct 28, 2026

   Contributor

   More actions

   Thanks for the detailed report. I could reproduce the light-mode part of this on 2.2.0 (you didn't give a version, so I used the latest release), and it still happens on the latest dev (fa1260d).

   What I saw in the TUI

   • With theme: { name: "ayu", mode: "light" }, the TUI still renders dark (#0B0E14). The same happens with nightowl (#011627).
   • With the built-in opencode theme, the same mode: "light" setting renders light, so the mode setting itself works.

   Still in the theme files on dev

   • catppuccin-frappe.json: frappeBlue is #8da4e2 and frappeOverlay2 is #949cb8, and light mode reuses the dark Frappé colours.
   • material.json: darkOrange is #ffcb6b, the same as darkYellow.
   • solarized.json: border uses the same value as backgroundPanel (base02 / base2). The screens I captured didn't show a border to compare, so this one is confirmed only from the file.

   I didn't check Kanagawa light mode. The script and recording below show the Ayu case, and the screenshots compare Ayu and Night Owl in light mode with the default theme.

   Your question about dark-only themes is a design choice for the maintainers. Related: #50500 covers the same kind of problems in the Desktop themes (packages/ui).

   recording.mp4

   

   

   

   Reproduction script (drive.ts)

   // Shows built-in TUI theme problems from #50523.
   // THEME / MODE env vars pick the theme (default: solarized / dark).
   import { Effect } from "effect"
   import { OpenCodeDriver } from "opencode-drive"
   
   const name = process.env.THEME ?? "solarized"
   const mode = (process.env.MODE ?? "dark") as "dark" | "light"
   
   export default OpenCodeDriver.use(
     {
       ...(process.env.OC_DEV ? { opencode: { dev: process.env.OC_DEV } } : {}),
       tuiConfig: { theme: { name, mode } },
       tui: { recording: true, viewport: { cols: 120, rows: 36 } },
     },
     ({ ui }) =>
       Effect.gen(function* () {
         yield* ui.screenshot(`${name}-${mode}-home`)
         // Open the command palette: a panel whose border uses the theme's `border` token.
         yield* ui.press("p", { ctrl: true })
         yield* Effect.sleep("1 second")
         yield* ui.screenshot(`${name}-${mode}-palette`)
         yield* Effect.sleep("1 second")
       }),
   )

   Run it with opencode-drive: opencode-drive run ./drive.ts. It drives opencode from your PATH; set OC_DEV to the path of an OpenCode checkout to run that from source instead.
5. opencodejr

   added

   reproduced

   on Oct 28, 2026
6. gotenksIN commented on Oct 29, 2026

   

   gotenksIN

   on Oct 29, 2026

   ContributorAuthor

   More actions

   Thanks for the detailed report. I could reproduce the light-mode part of this on 2.2.0 (you didn't give a version, so I used the latest release), and it still happens on the latest dev (fa1260d).

   What I saw in the TUI

   • With theme: { name: "ayu", mode: "light" }, the TUI still renders dark (#0B0E14). The same happens with nightowl (#011627).
   • With the built-in opencode theme, the same mode: "light" setting renders light, so the mode setting itself works.

   Still in the theme files on dev

   • catppuccin-frappe.json: frappeBlue is #8da4e2 and frappeOverlay2 is #949cb8, and light mode reuses the dark Frappé colours.
   • material.json: darkOrange is #ffcb6b, the same as darkYellow.
   • solarized.json: border uses the same value as backgroundPanel (base02 / base2). The screens I captured didn't show a border to compare, so this one is confirmed only from the file.

   I didn't check Kanagawa light mode. The script and recording below show the Ayu case, and the screenshots compare Ayu and Night Owl in light mode with the default theme.

   Your question about dark-only themes is a design choice for the maintainers. Related: #50500 covers the same kind of problems in the Desktop themes (packages/ui).

   recording.mp4
   

   

   

   Reproduction script (drive.ts)

   handled in #50525
7. ffloyd commented on Oct 30, 2026

   

   ffloyd

   on Oct 30, 2026

   More actions

   Still a problem in 2.2.2. At least with ayu theme.