Windows 11's Mica Backdrop for Firefox 133+

[MeguMario]

Description

Since the release of Firefox 133, it's possible to enable Firefox's native support for Windows 11's Mica Backdrop without the need of third party software like MicaForEveryone and OpenGlass (although both can be used to replace the Mica Backdrop with either Acrylic or reimplemeted Aero from OpenGlass).

With that, I would like to see 708e4e8 returns in some form officially, I have done some modification to the theme itself to demonstrate what it would be to have this back. I also attach my config here just in case anyone want to try it out

To enable Mica Backdrop on Firefox 133+, enable these in about:config

    widget.windows.mica
    browser.theme.native-theme
    browser.tabs.allow_transparent_browser

To enable my config, enable these in about:config

    sidebar.revamp
    uc.tweak.win11-mica
    uc.tweak.collapse-sidebery
    uc.tweak.new-horizontaltab
    uc.tweak.rounded-corners
    uc.tweak.hide-tabs-bar
    uc.tweak.theme.sidebery
    uc.tweak.floating-tabs

Screenshot / video recording

Native Mica backdrop

Light Mode

Pull request #158 with (rather janky) dynamic transparency

Screen.Recording.2024-12-02.162234.mov

Dark Mode

Screen.Recording.2024-12-02.212155.mp4

With OpenGlass

Dark Mode

Light Mode

[MeguMario]

Some additional hacks so that the new vertical tab bar at least look decent

[rainbowflesh]

How do you make sidebery background transparency?

---

Never mind, add :root {background-color: transparent;} to sidebery css config.

[Aurora2624]

Every time it is opened, it will display as follows

Click minimize and then click maximize again to display normally

[0oWow]

Hi, thanks for your hard work on making this theme, and especially the Mica implementation. It works great overall. (EDIT: Just realized that OP isn't the developer of the theme. Well thanks to you too OP!)

I just wanted to mention that on Firefox 135 (at least), beta branch, the Window Controls are missing, even with Mica off. I found the code that controls this, in your custom.css file. After commenting out the following code, I was able to get Mica and Window Controls enabled (Windows 11 24h2).

/*    :root:is(:not(:root[lwtheme]), [lwt-default-theme-in-dark-mode="true"])
            .titlebar-buttonbox-container {
            --uc-titlebar-button-size: 30px;
            --uc-titlebar-size: calc(
                var(--tab-min-height) + var(--tab-block-margin)
            );
            margin-bottom: calc(
                var(--uc-titlebar-size) - var(--uc-titlebar-button-size)
            ) !important;
        }
        :root:not([inFullscreen]):is(
                :not(:root[lwtheme]),
                [lwt-default-theme-in-dark-mode="true"]
            )
            .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
            list-style-image: none !important;
        }
        :root:is(
                :not(:root[lwtheme]),
                [lwt-default-theme-in-dark-mode="true"]
            ):is([inFullscreen], [sizemode="maximized"])
            .titlebar-button {
            padding-block: 7px 9px !important;
        }
        :root:is(
                :not(:root[lwtheme]),
                [lwt-default-theme-in-dark-mode="true"]
            ):is([inFullscreen], [sizemode="maximized"])
            .titlebar-close {
            padding-right: 19px !important;
        }*/
		
		/* Fix Duplicated Window Control when Firefox's window is inactive with Accent Color in Titlebar option on  
		
		@media (-moz-windows-accent-color-in-titlebar) {
        :root:is(
                :not(:root[lwtheme]),
                [lwt-default-theme-in-dark-mode="true"]
            ):not([inFullscreen]):is(:-moz-window-inactive)
            .titlebar-buttonbox{
				opacity: 1 !important;
			}
        :root:is(
                :not(:root[lwtheme]),
                [lwt-default-theme-in-dark-mode="true"]
            ):not([inFullscreen])
            .titlebar-buttonbox{
				opacity: 1 !important;
			}	
		}
		
		/* Restore Firefox's Window Control when Fullscreen */
		
        /*:root:is(
                :not(:root[lwtheme]),
                [lwt-default-theme-in-dark-mode="true"]
            ):is([inFullscreen])
			.titlebar-buttonbox {
				opacity: 100 !important;
			}*/
			
		/* Extension Transparency */