Thank you, I see that this is working with Chrome but is there any way to make it work on safari or the Mac companion app?
Try adding -webkit- in front of it.
Iāve tried but with no success 
the following is my code in theme.yaml
card-color: rgba(34,38,39,0.9)
dialog-backdrop-filter: blur(55px)
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
card-mod-theme: Midnight-custom
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.5);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 20px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
The card-mod-more-info-yaml doesnāt work for default popups like I mentioned, only for browser_mod popups. Add -webkit- to the global theme, not card-mod (if your goal is to mod stock popups like me).
-webkit-dialog-backdrop-filter: blur(55px)
-webkit-iron-overlay-backdrop-opacity: 1
-webkit-iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
And then make sure you reload theme service call through dev page. Otherwise the changes will never take effect. I donāt use iOS anymore, so canāt say if this still works.
Btw: this is my theme more-info card-mod now:
card-mod-more-info-yaml: |
.: |
app-toolbar {
background: none !important;
}
mwc-icon-button {
margin-top: -10px;
color: #FFFFFF;
}
.main-title {
color: rgba(0,0,0,0.0);
letter-spacing: '-0.01em';
font-family: Helvetica;
font-weight: bold;
}
$: |
.mdc-dialog {
backdrop-filter: blur(17px) !important;
-webkit-backdrop-filter: blur(17px) !important;
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
The webit prefix on global theme seems to be completely ignored on iOS and Mac.
As well as all the setup under the card-mod-more-info-yaml: for the default popups. I really donāt understand whatās wrongā¦
Hi,
I am trying to use the same thing to hide the chevrons, but I am not sure it is supposed to do what I want.
I would like to remove these chevrons (especially useful on a smartphone):
Is this theme modding supposed to work ?
paper-tabs$: |
.not-visible {
display: none;
}
Thank you!
Hi!
I am trying to use theme-independent CSS but donāt get it to work.
I have used the ui-lovelace.yaml and themes.yaml and itās working great! CSS code has been added into the themes.yaml and is working as desired.
However I have multiple themes, and do not want to repeat the CSS code for each theme.
Is there any possibility to use theme independent / global CSS? In principle Iām looking for
card-mod-theme: *
I tried to move the CSS from my themes.yaml into my ui-lovelace.yaml but donāt get this to work either.
Thank you!
Hi all! I have been searching for a couple of days trying to figure out how to remove the box-shadow under app-header (or before app-toolbar) Any suggestions? 
Nevermind. I know I tried it before and it didnāt work. Tried again and worked fine.
card-mod-root: |
app-header::before {
opacity: 0!Important;
}
Is it possible to change the .dot color (the dot notification above in the sidebar on the hamburger menu)? Checked with Chrome dev tools and found this code but have no idea how to use this in my theme.yaml file.
.dot {
pointer-events: none;
position: absolute;
background-color: var(--accent-color);
width: 12px;
height: 12px;
top: 9px;
right: 7px;
border-radius: 50%;
border: 2px solid var(--app-header-background-color);
I havenāt checked recently, but I think that the sidebar isnāt one of the elements stylable. Of course, you can change the accent-color variable still.
Removed due to wrong topic, this one is about theming. I posted to š¹ Card-mod - Add css styles to any lovelace card - #2223 by e-raser.
had forgotten all about thisā¦ and yet, I can not get it to show a color according to my sensor, like:
paper-tab[label="Alarm"] {
color: {{states('sensor.alarm_panel_icon_color')}};
}
do we need to set this under a certain header? as it is, it is all under card-mod-root-yaml: |
sorry if this is too basic to not start laughingā¦
its just that I do something like that non a markdown card, and that has the desired effect:
**<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_item')|capitalize}}</font>**
as a matter of fact, I can not even get it to turn green:
paper-tab[label="Alarm"] {
color: green;
}
while I am here, could anyone point me to some explanation on device dependent settings? case: I want my header to show at the top on mobile and title at the bottom, and vice versa on desktop.
right now I cant get anything to happen to the menubar/title at all. All I see is this:
and of all settings I tested, only this sticks
compact-header:
header-height: 48px ## cant get anything to happen here....# Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
.: |
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-color);
color: var(--text-primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black;
}
paper-tab[aria-selected=true] {
color: gold;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
paper-tab[label="Alarm"] {
color: green;
}
hope this isnt too extravagant 
thanks for having a look!
Does just this work for you at all? Have you checked thatās what the label actually is in devtools?
card-mod-root: |
paper-tab[aria-selected="true"] {
color: var(--primary-color);
}
works fine uses in my Clear theme:
Clear:
card-mod-theme: custom-header
and settings in the mod:
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black !important;
}
paper-tab[aria-selected=true] {
color: gold !important;
}
the same mod uses
paper-tab[label="Alarm"] {
color: green !important;
}
for the Alarm tab, but doesnāt color.
this is the header of the view:
title: Alarm
icon: mdi:shield-check
path: alarm
cards:
so I guess that should be good?
I can even do:
}
paper-tab[aria-selected=true] {
color: {{states('sensor.alarm_panel_icon_color')}} !important;
and have the selected icon change color according to the template. So we know thats alright. So this leave the tab selector to be straightened out
wait!! Ive found itā¦ !
because of this
I figured I had to do it with aria-label, instead of labelā¦
paper-tab[aria-label='Alarm'] {
color: {{states('sensor.alarm_panel_icon_color')}};
}
et voila:
1 Like
now how to change the icon? can we do that too? id need something like
paper-tab[aria-label='Presence'] {
icon: {{states('sensor.presence_icon')}};
color: {{state_attr('sensor.family_home','icon_color')}};
}
scondly, I can no longer get the template to show up in the three-dots area with:
card-mod-root: |
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: "{{states('sensor.time')}} - {{states('sensor.temp_current')}}Ā°";
position: absolute;
top: 14px;
right: 0px;
}
I know this is an older bit of code, but must have read this thread for 4 times now, and cant find a new way of doing itā¦ Id simply like my view title to be displayed.
not sure if that is even possible, but at least browser mod gives us path which I guess we could unslugify and capitalize using
{{state_attr('sensor.browsermod_id','path').split('/')[1].replace('_',' ').capitalize}}
took me a while, but finally I understood how to hide several option menu items (additional to hiding the Help)ā¦ sharing because I didnt find any reference to it before:
/* Hide several option menu items. */
a.menu-link[target="_blank"] {
display: none;
}
mwc-list-item[aria-label="Edit Dashboard"] {
display: none;
}
mwc-list-item[aria-label="Unused entities"] {
display: none;
}
still cant replace the vertical-dots with a template thoughā¦ anyone please help me out there?
Hi guys,
yesterday was a sad day. I had to finally get rid of Custom Header as it made problems with the newest Update. I am used to have my Header Icons colored, see image below or GitHub - philipp089/Home-Assistant-Config: HA Config and UI
After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:
- type: "custom:mini-media-player"
artwork: cover
entity: media_player.tv_samsung_q7_series_55
name: Fernseher Wohnzimmer
style: |
ha-card {
box-shadow: 1px 1px 1px 1px var(--divider-color);
}
but i have no clue how to affect the header. Can someone point me in the right direction here?
I posted the same question here:
in case one thread might seem wrong to anybody, please let me know and i delete the doubled question.
Cheers,
Philipp
I have what I hope is a simple question. I have a view that, depending on the width of the browser, can be either 1 or 2 columns. The main set of cards is always in the first column and includes many custom button cards for mainly device control. The column is resizeable using custom:grid-layout
type: custom:grid-layout
layout:
grid-template-columns: 1% minmax(425px, 660px) 1% minmax(425px, 1200px) 1%
grid-template-rows: auto
grid-template-areas: |
"marg1 col1 marg3 col2 marg2"
mediaquery:
"(max-width: 800px)":
grid-template-columns: 100%
grid-template-areas: |
"col1"
"col2"
and I am trying to automatically resize the fonts in all cards based on the width of the column. I have created mediaqueries in my theme as follows:
card-mod-card: |
@media (orientation: portrait) {
:host {
font-size: 12px;
}
}
@media (min-width: 350px) {
:host {
font-size: 10px;
}
}
@media (min-width: 400px) {
:host {
font-size: 12px;
}
}
@media (min-width: 500px) {
:host {
font-size: 14px;
}
}
@media (min-width: 575px) {
:host {
font-size: 16px;
}
}
@media (min-width: 650px) {
:host {
font-size: 18px;
}
}
This works great on my phone, and when there is only a single column in my browser. As I widen the screen, the fonts all get progressively larger. However, when the browser screen is wide enough to start a 2nd column, it no longer works because the queries are based on the screen width and not the column width. I have not been able to figure out how to do this. I have tried several things as follows but none of them work. Hopefully, it is just a syntax issue. Any help would be greatly appreciated.
@media (min-column-width: 350px) {
:host {
font-size: 10px;
}
}
@media (min-width / column-count: 1050px) {
:host {
font-size: 10px;
}
}
@media (min-width / columns: 1050px) {
:host {
font-size: 10px;
}
}