Temporarily disable background blur/transparency

[iridris]

Is there a way I can temporarily modify my installation to turn off the background transparency? I use Firefox as my primary browser, but unfortunately Firefox has disabled the ability to render background blur for a few months while they refactor the code. With the transparency enabled, but with no background blur present - it is a bit difficult to read some of the text.

Firefox bug tracking the code refactoring: https://bugzilla.mozilla.org/show_bug.cgi?id=1749625

[Madelena]

Yes, to temporarily modify it, you can look for these lines in metro.yaml and remove them:

      .mdc-dialog__surface {
        backdrop-filter: blur(8px);
        background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
      }

      app-header, app-toolbar {
        backdrop-filter: blur(8px);
      }

Also look for:

  app-header-background-color: "rgb(255,255,255,.33)"

And change it into:

  app-header-background-color: "rgb(255,255,255,1)"

[caraar12345]

Ohhhh there's meant to be blur?

I think the iOS Home Assistant app fails to render this too 😞

I was confused as to why everything was just transparent!

[Madelena]

I've added a fix for iOS in v1.2.1 that should work now. 😳

[caraar12345]

Oh you star!!! Thank you ❤️

I love this theme; this makes it better 😃

[caraar12345]

Installed the pre-release v1.2.1 - and that's resolved it 🚀

Thank you!

[Madelena]

Thanks for testing it and I'm glad it's working! 😊