Yes, that would be the point, but sadly it does not work, no matter which label-badge (-blue or -red) I use.
Is the problem with the code or the feasability inside picture-element?
To test whether it applies at all, try adding a display: none outside of the if statement in :host.
Something just does not add up. None of the preferences inside host: seems to work, not even positioning.
Until 40 minutes ago, styling picture elements had never been supported.
It is now, though. In card-mod 3.0.0.
Please re-read the readme. Lots of things have changed.
Hi @thomasloven
Firstly, thanks for all the work you do on this and your other cards/plugins, a lot of us would have far more bland lovelace setups if it wasnāt for you.
Iāve just updated to 3.0.0 and have an odd behaviour, I read the updated readme about adding card_mod: before style: | and confirm those styles are being applied but āstateā color changes are not being applied to icons even though theyāre outside of āstyleā;
I have a row of custom:button-cards as a header with the first showing day/night based on sun.sun, during the day the color changes based on the state of a binary_sensor from the openuv integration, this and the other buttons that change color depending on state are not working since the update.
Any assistance would be appreciated.
UPDATE: Iāve also confirmed it affects changing the icon color based on state on all custom:button-card instances with styling applied.
- type: conditional
conditions:
- entity: sun.sun
state: above_horizon
card:
type: custom:button-card
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
entity: binary_sensor.protection_window
show_name: false
show_state: false
aspect_ratio: 1/1
color_type: icon
color: auto
icon: custom:sun
size: 75%
styles:
card:
- padding: 5%
state:
- value: "on"
color: var(--sun)
- value: "off"
color: var(--header-text-color)
- value: "unavailable"
color: var(--black)
tap_action:
action: none
- type: conditional
conditions:
- entity: sun.sun
state: below_horizon
card:
type: custom:button-card
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: var(--header-text-color)
icon: custom:night
size: 75%
styles:
card:
- padding: 5%
tap_action:
action: none
Oh well, that explains a lot. 
Iāll dig deep into it.
Thank you thomasloven for your hard work! 
Thomas this class no longer seems to be working in the mobile app (ios) with 3.0.1:
card-mod-theme: day
card-mod-card: |
ha-card.top-level-card {
border: solid 1px var(--primary-text-color);
background: url("/local/background/card_bg_Day.png");
}
No card background or border is displayed. It is working on the desktop (Firefox).
Reverted to 2.0.3 and the card displays as expected again.
I saw a lot of examples with state-label, but when I apply the same customization below state.badge it donāt work for me. Are all the elements supported? THY
class:
has been moved to
card_mod:
class:
1 Like
Weird that it only affected mobile.
ā¦if I had a dollar for every timeā¦
Itās the wonderful world of caching.
1 Like
Except I did do a Ctrl + F5 on the desktop. Iāll double check before I start updating all my cards.
Yep, just double checked, still working fine on desktop after a Ctrl+F5 and Ctrl+Shift+R on card-mod 3.0.1.
Also replacing this:
class: top-level-card
entities:
- entity: sensor.uptime
- entity: sensor.last_boot
name: Last Boot
- entity: sensor.cert_expiry_timestamp_mydomainredacted_duckdns_org
name: Certificate Expiery
show_header_toggle: false
title: System Info
type: entities
With this:
card_mod:
class: top-level-card
entities:
- entity: sensor.uptime
- entity: sensor.last_boot
name: Last Boot
- entity: sensor.cert_expiry_timestamp_mydomainredacted_duckdns_org
name: Certificate Expiery
show_header_toggle: false
title: System Info
type: entities
Fixes the background and border on mobile but now does not display the border or background on the desktop (yes cache cleared).
With v3.0.3 this
card_mod:
class: top-level-card
Now produces no background or border on mobile or desktop. And this:
class: top-level-card
Continues to display background and border on desktop but not mobile.
With 3.0.3 i now have a blinking header.
Latest chrome on ubuntu 18.04, no issue in FF.
This is the card-mod part of my theme
# Card mod
card-mod-theme: darkorange_rk_tpad
header-height: 48px
card-mod-root-yaml: |
ha-tabs$: |
/* This hides tab scroll arrows, remove next 3 lines if you want them. */
paper-icon-button {
display: none;
}
/* This makes it so arrows are only displayed when needed. */
.not-visible {
display: none;
}
.: |
/* Let's get going! */
/* We still need this, because we need to compact edit mode. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* 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);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* This hides the help button, menu button and title */
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none !important;
}
ha-menu-button {
display: none !important;
}
@media (orientation: landscape) {
ha-tabs::after {
font-size: 20px;
content: "{{ state_attr('sensor.date_time_formatted', 'friendly_name') }}, {{ states('sensor.time') }}";
text-transform: none;
white-space: pre;
}
# More Info
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(0,0,0,0.3);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#background: none !important;
#box-shadow: none;
border-radius: 1em;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: rgba(38, 49, 55, 0.8)
}
Back to 3.0.2 fixes this.
This line:
app-header, app-toolbar {
background: var(--primary-background-color) !important;
should really be
app-header-background-color: var(--primary-background-color)
and not be the concern of card-mod at allā¦
But I can reproduce the problem and have a fix ready. Look forward to 3.0.4 soon.
1 Like
I blindly copied parts of code in this topic without understanding it. 
EDIT: From the Theme cookbook.
Hello everyone after updating card-mod my graphs that I use with min graph card do not work correctly if I move the mouse over the bars of the graph the card changes size and the blinkano bars I have to stop on a bar and this defect disappears but how I move it starts again. For the sake of completeness, I would like to point out that not doing this update everything works regularly