Skip to content

feat: toggle transparent background - #5657

Open
JosXa wants to merge 3 commits into
anomalyco:devfrom
JosXa:feature/transparent-theme
Open

feat: toggle transparent background#5657
JosXa wants to merge 3 commits into
anomalyco:devfrom
JosXa:feature/transparent-theme

Conversation

@JosXa

@JosXa JosXa commented Dec 17, 2025

Copy link
Copy Markdown
Contributor

Summary

  • Introduce a tri-state transparency policy (auto | on | off) for the TUI theme, persisted via theme_transparent and resolved inside resolveTheme(theme, mode, transparency).
  • Add the theme.transparency command to the command palette. Its title reports the current policy and, in auto, the resolved effective state (e.g. Transparency: Auto (on)). Running it cycles auto -> on -> off -> auto.
  • Expose theme.transparent on the resolved theme as the effective runtime state (background.a < 1), so any consumer can ask whether the active background is transparent without having to interpret the policy.
  • Register theme_transparency in the typed keybind config and map it to theme.transparency, matching the neighboring theme bindings.

Closes #11866.

Why

Background transparency is useful when the terminal already provides its own transparency (e.g. Ghostty background-opacity, kitty, alacritty), and individual themes increasingly want to express transparency intent themselves. The merged PR #8467 already makes the generated system theme transparent by default for exactly this reason.

A simple boolean toggle conflicts with that direction: when the active theme is system, the resolved background is already transparent, so a label like Enable transparency is misleading, and toggling off later cannot undo a theme-defined transparent background. The right primitive is a small policy:

  • auto respects the theme's own background alpha, including system being transparent by default.
  • on forces the resolved background to alpha 0 while preserving the original RGB.
  • off forces any non-opaque resolved background to alpha 1 while preserving the original RGB, so transparent themes can be made opaque again.

The command palette communicates this directly: in auto it shows Transparency: Auto (on) or Transparency: Auto (off) depending on the active theme, and in the forced states it shows Force on / Force off.

Compatibility

  • Backwards compatible with the previous boolean: persisted theme_transparent=true is read as "on"; false or any unknown value is read as "auto" (the new default).
  • Plays well with the existing system-theme transparency from PR #8467: auto no longer overrides what the theme defines.

Tests

  • Added resolveTheme transparency policy respects auto, on, and off in packages/tui/test/theme.test.ts, covering:
    • Default themes stay opaque under auto and become alpha-0 (with original RGB preserved) under on.
    • The generated system theme is transparent under auto, and becomes opaque (with original RGB preserved) under off.
    • Partially transparent backgrounds (a = 0.5) are reported as transparent under auto and forced to alpha 1 under off.

Verified locally:

  • bun test packages/tui/test/theme.test.ts passes.
  • bun typecheck in packages/tui passes.

Screenshots

N/A – the change is a TUI-only behavior/state change. The visible difference is the command palette title for theme.transparency, e.g.:

  • Transparency: Auto (on) when the active theme defines a transparent background.
  • Transparency: Auto (off) when the active theme defines an opaque background.
  • Transparency: Force on and Transparency: Force off when the policy is forced.

@JosXa
JosXa marked this pull request as draft December 17, 2025 01:01
@JosXa

JosXa commented Dec 17, 2025

Copy link
Copy Markdown
Contributor Author
WindowsTerminal_6hnjPAQH6h.mp4

@JosXa
JosXa marked this pull request as ready for review December 17, 2025 01:25
@JosXa
JosXa force-pushed the feature/transparent-theme branch 3 times, most recently from 3197378 to 003dafc Compare December 17, 2025 01:35
if (transparent) {
resolved.background = RGBA.fromInts(0, 0, 0, 0)
// NOTE: Could alternatively apply an alpha channel to the theme's base background color
// instead of forcing full transparency, allowing for adjustable opacity levels

@JosXa JosXa Dec 17, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to model this with the TUI though.

I saw https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderables/Slider.ts, but it doesn't appear to exposed to Solid yet

@ariane-emory

ariane-emory commented Dec 17, 2025

Copy link
Copy Markdown
Contributor

Dynamically switching the text for this menu item from "Enable transparency" to "Disable transparency" to indicate its current state would be a nice touch.

@Ollie-Ave

Copy link
Copy Markdown

This is something I'd love to see!

@amberpixels

Copy link
Copy Markdown

Nice feature to have!

@JosXa

JosXa commented Feb 3, 2026

Copy link
Copy Markdown
Contributor Author

Dynamically switching the text for this menu item from "Enable transparency" to "Disable transparency" to indicate its current state would be a nice touch.

Yo OpenCode, can you handle that?

@github-actions

github-actions Bot commented Feb 3, 2026

Copy link
Copy Markdown
Contributor

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

  1. Open an issue describing the bug/feature (if one doesn't exist)
  2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

@JosXa

JosXa commented Feb 3, 2026

Copy link
Copy Markdown
Contributor Author

Done! ✅ I've updated the toggle transparency command to dynamically show 'Enable transparency' or 'Disable transparency' based on the current state.

Pushed to the branch in commit 942bfb7.

@JosXa
JosXa force-pushed the feature/transparent-theme branch 2 times, most recently from 928ee28 to a76d000 Compare February 3, 2026 01:46
@Youssef-codin

Copy link
Copy Markdown

this would be really nice to have

@youssefadly237

Copy link
Copy Markdown

+1

JosXa added 2 commits June 21, 2026 20:03
Adds a new command to toggle transparent background for terminal emulators
that support transparency. The toggle text dynamically updates based on
the current transparency state.

Closes anomalyco#11866
@JosXa
JosXa force-pushed the feature/transparent-theme branch from f884535 to d6f11bc Compare June 21, 2026 18:07
@Sowevo

Sowevo commented Jul 1, 2026

Copy link
Copy Markdown

Also really looking forward to this feature — transparent terminal with opencode would be a game changer. Hope this gets reviewed and merged soon! 🙏

@dsambugaro

Copy link
Copy Markdown

+1

1 similar comment
@guilhermestella

Copy link
Copy Markdown

+1

@thanhdatvo

Copy link
Copy Markdown

When will this feature will be merged?

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.

Add transparency/translucent background support for TUI

10 participants