feat: add zen.theme.transparent-content for full native transparency#13201
Open
xtraChizz wants to merge 1 commit intozen-browser:devfrom
Open
feat: add zen.theme.transparent-content for full native transparency#13201xtraChizz wants to merge 1 commit intozen-browser:devfrom
xtraChizz wants to merge 1 commit intozen-browser:devfrom
Conversation
Adds a new about:config preference `zen.theme.transparent-content` (default: false) that enables full transparency for web content areas. When enabled: - Removes the semi-transparent background overlay from transparent browser containers (browser[transparent="true"]) so the desktop wallpaper shows through cleanly. - Reduces the browser background overlay opacity by 40% to let the native window transparency effect (Mica/Acrylic on Windows, compositor transparency on Linux) be more visible. This eliminates the need for the userChrome.css hack that extensions like transparent-zen currently recommend to their users.
dosubot
bot
added
size:S
mr-cheffy
requested changes
Apr 11, 2026
| box-shadow: var(--zen-big-shadow); | ||
| } | ||
|
|
||
| & browser[type="content"] { |
Member
There was a problem hiding this comment.
Should just add the pref check here?
| * overlay opacity so the window's native transparency effect (Mica, | ||
| * Acrylic, or compositor transparency on Linux) is more visible. */ | ||
| /* stylelint-disable-next-line media-query-no-invalid */ | ||
| @media -moz-pref("zen.theme.transparent-content") { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
about:configpreferencezen.theme.transparent-content(default:false) that enables full transparency for web content areas.Problem
Currently, even when
browser.tabs.allow_transparent_browseris enabled and a page declares itself transparent, Zen still renders a semi-transparent overlay (rgba(255,255,255,0.4)in light mode /rgba(255,255,255,0.1)in dark mode) over the content area. This prevents the desktop wallpaper from showing through cleanly.Extensions like Transparent Zen currently recommend users add a
userChrome.csshack to work around this:Solution
This PR adds a native, preference-gated solution:
prefs/zen/theme.yaml— Registers the newzen.theme.transparent-contentboolean preference (default:false)src/zen/common/styles/zen-browser-container.css— When enabled, removes the semi-transparent background frombrowser[transparent="true"]containerssrc/zen/common/styles/zen-browser-ui.css— Reduces the browser background overlay opacity by 40% so the native window transparency (Mica/Acrylic on Windows, compositor on Linux) is more visibleHow to test
browser.tabs.allow_transparent_browserinabout:configwidget.windows.mica=truezen.widget.linux.transparency=truezen.theme.transparent-contenttotrueBefore / After
Notes
false(default)@media -moz-pref()pattern already used throughout the codebase