[create-theme]: Immersive Zen

[madeofsoil]

Name

Immersive Zen

Description

Adds Immersiveness to Zen Browser.

Homepage

https://github.com/notscripterin/immersive-zen

Image

https://raw.githubusercontent.com/notscripterin/immersive-zen/refs/heads/main/image_600x400px.png

Type

• JSON Color Theme

Theme Styles

@-moz-document url-prefix("chrome:") {
  /* Transparency */
  @media (-moz-bool-pref: "mod.immersive_zen.transparency") {
    :root {
      --zen-dialog-background: transparent !important;
      --zen-branding-bg: transparent !important;
    }
  }

  /* Glass Effect */
  @media (-moz-bool-pref: "mod.immersive_zen.glass_effect") {
    :root {
      --zen-dialog-background: hsla(0, 0%, 100%, 0.08) !important;
    }

    :root[zen-compact-mode="true"] {
      #titlebar::before {
        background-color: hsla(0, 0%, 100%, 0.08) !important;
      }
    }
  }

  /* Immersive Sidebar */
  @media (-moz-bool-pref: "mod.immersive_zen.immersive_sidebar") {
    :root[zen-compact-mode="true"]:has(
        #navigator-toolbox[zen-has-hover],
        #navigator-toolbox[movingtab]
      ) {
      #zen-appcontent-wrapper {
        filter: blur(20px) !important;
      }
    }
  }

  /* Immersive Popup */
  @media (-moz-bool-pref: "mod.immersive_zen.immersive_popup") {
    :root:has(
      #navigator-toolbox[has-popup-menu]:not(#navigator-toolbox[movingtab])
    ) {
      #zen-main-app-wrapper,
      #urlbar {
        filter: blur(20px) !important;
        pointer-events: none !important;
      }
    }
  }

  /* No Navbar */
  @media (-moz-bool-pref: "mod.immersive_zen.no_navbar") {
    #zen-appcontent-navbar-wrapper {
      display: none !important;
    }

    #zen-tabbox-wrapper {
      margin-top: var(--zen-element-separation) !important;
    }
  }

  /* No Gaps */
  @media (-moz-bool-pref: "mod.immersive_zen.no_gaps") {
    #zen-tabbox-wrapper {
      margin: 0 !important;
    }
  }
}

Readme

# Immersive Zen

Adds Immersiveness to Zen Browser.

Preferences

[
  {
    "property": "mod.immersive_zen.transparency",
    "label": "Make overlays and popups transparent.",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.immersive_zen.glass_effect",
    "label": "Add glass effect to overlays and popups.",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.immersive_zen.immersive_sidebar",
    "label": "Blurs the active tab when sidebar is visible in compact mode.",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.immersive_zen.immersive_popup",
    "label": "Blurs the whole browser when any popup is opened. (beta)",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.immersive_zen.no_navbar",
    "label": "Hide navbar",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.immersive_zen.no_gaps",
    "label": "Remove gaps from around the page.",
    "type": "checkbox",
    "defaultValue": true
  }
]

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-1671 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.