Hello good people! I’m hoping to theme my iPhone status bar to match the background of my browser mod popups but seem to be coming up empty. In my theme, I know I can change the app-header-background-color element, which I have defined as black in the theme so it blends well in the iOS dark mode. However, for my pop-ups specifically, I want to override this with the color of my pop-up background using --app-header-background-color: rgba(255,255,255,0.1).
Obviously I’m doing something wrong so hoping someone more experienced with YAML / Card Mod / CSS can chime in. I’ve included a code snippet below of what I’ve attempted. Thank you in advance for your help!
type: custom:button-card
icon: mdi:lightning-bolt
aspect_ratio: 1/1
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
:host {
--mdc-theme-surface: transparent;
--app-header-background-color: rgba(255,255,255,0.1);
}
div.mdc-dialog__scrim {
backdrop-filter: blur(30px) !important;
-webkit-backdrop-filter: blur(30px) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}