Sounds like data-loading problem rather than style-application problem.
Like many entities in one view? Or reading the states of all those entities?
Hard to tell w/o analyzing network activity. Can be both. You can check Network tab in browserās Dev tools to see what is going on.
The question is mainly about a reusing a code.
Check the main card-mod thread - 1st post - fantastic link at the bottom - other stuff - reusing
As for performance: majority of registered issues on card-mod GitHub is same moaning āhere my mushrooms, got freezes, delays etcā. And note that the author of these honestly great cards intentionally declines card-mod-related issues since considers that mushrooms do not need card-mod. Means - what users are doing is smth not supposed to be done.
so in this case it would be better to avoid mushroom card elements and solve individual displays with standard elements contained directly in HA?
Or using card-mod properly and where it really needed.
I think i have a formatting error in this card mod, but somehow i canāt figure it out.
On my kioks rpi4 2gb with chromium it sometimes doesnāt load the the module specific .event etcā¦ mods. the ha-card part works always.
All other card modās on other cards all work when this happens, also on other computers it works most of the time, but i can replicate it by pressing refresh as a mad man 
card_mod:
style: |
.event {
color: white !important;
background-color: var(--border-color) !important;
}
.today .number {
color: white;
text-shadow: 0px 3px 3px rgba(0,0,0,50);
}
.none {
background-color: transparent !important;
}
.events {
font-size: 1.4em;
}
.wk {
font-size: 1.2em;
font-weight: 500;
}
ha-card {
border: none;
--ha-card-box-shadow: 0px;
margin: -25px 0px -32px !important;
}
Heads up: 2025.5 breaks many theme variables, and replaces some of them with new names.
see: 2025.5: Beta release notes for this QoL release - Home Assistant
for the theming of the menu bar there is a lot to look intoā¦
not only replace āpaper-tabā with āsl-tabā, which was a quick fix to get things going once again.
we can still do things like
/* Dynamically set the color and icons of individual tabs. */
sl-tab[aria-label='Wekker instellingen'] {
color: {{'var(--alert-color)' if wekker else 'var(--success-color)'}};
}
But I am having trouble finding the right element for the active icon-color and tab indicator, to replace:
/* Set the color of the currently selected tab indicator. */
ha-tabs {
--sl-tabs-selection-bar-color: var(--tab-active-color) !important;
}
/* Set the color of the currently selected tab.
Set size of the currently selected tab icon*/
sl-tab[aria-selected=true] {
color: var(--tab-active-color);
border: 1px solid var(--primary-color);
/*background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 50%);*/
--mdc-icon-size: {{states('input_number.active_icon_size')|int(24)}}px;
}
the icon-size does change alright, the colors dont. Also, the position of the icon drops when another size is activeā¦
btw, --sl-tabs-selection-bar-color: is a result of an auto-edit replace from paper-tab to sl-tab ā¦ and probably not valid
I do think we can simply do
app-header-selection-bar-color: var(--active-color)
in our main themesā¦ which is way easier and no more card-mod required.
so, lot of work to be done
update
display: flex; fixes the drop of the icon in the menu bar
Iāve been pointed to the variables
--ha-tab-active-text-color: red
--ha-tab-indicator-color: red
by dev in Discord, but somehow those tdont work at all
2 Likes
4 weeks ago was posted, and I myself did not do anything in my config to fix that )))
yeah well, regular card-mods are not affected? unless you rely on the āpaperā variables directly. Dont think I have spotted a single mod to fail just yet
the menu bar and sidebar elements are the big change for now
which also causes Kiosk-mode and custom-sidebar to be broken completely. Author is aware
At least all paper variables are affected.
1 Like
correct. otoh, we knew that was coming for a long time.
I havent had paper-xx variables in use for over a year I think
Hi,
Iād like to change the standard toggle icon for mdi:toggle-switch.
How can I point to this class or element mdc-switch--checked & mdc-switch--unchecked correctly in the theme.yaml?
Thanks!
so it seems like that version 2025.5 changed some stuff i used to modify the tab bar on mobile. this is what i used to move the navbar to the bottom and change the size of it. also spacing the icons of the tabs and change the color of them. anyone knows what they changed and how to fix it?
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
paper-icon-button {
display: none;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
div#view{
transform: initial;
padding: 0 !important;
position: fixed !important;
margin: 0 !important;
width: 100%;
height: 100%;
}
.header {
top: auto !important;
bottom: 0px !important;
box-shadow: var(--footer-shadow);
height: var(--header-height) !important;
background-color: rgba(var(--bar-RGB), 0.7) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
background-blend-mode: overlay;
}
.toolbar {
height: var(--header-height) !important;
padding: 10px 0px !important;
background-color: rgba(var(--bar-RGB), 0.7) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
background-blend-mode: overlay !important;
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top: 15px;
height: var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
paper-tab {
color: var(--header-all-tabs-color);
--paper-tab-ink: var(--card-background-color);
border-radius: 25px;
height: 50px;
padding: 0 1.58rem;
}
.main-title {
padding-bottom: 10px;
}
.mdc-icon-button {
padding-bottom: 10px;
}
ha-icon-button-arrow-prev {
padding-bottom: 10px;
padding-left: 20px;
}
EDIT: looks like i fixed it. maybe not the best way to do it, but it works 
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
paper-icon-button {
display: none;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
div#view{
transform: initial;
padding: 0 !important;
position: fixed !important;
margin: 0 !important;
width: 100%;
height: 100%;
}
.header {
top: auto !important;
bottom: 0px !important;
box-shadow: var(--footer-shadow);
height: var(--header-height) !important;
background-color: rgba(var(--bar-RGB), 0.7) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
background-blend-mode: overlay;
}
.toolbar {
height: var(--header-height) !important;
padding: 10px 0px !important;
background-color: rgba(var(--bar-RGB), 0.7) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
background-blend-mode: overlay !important;
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
sl-tab-group {
--ha-tab-indicator-color: var(--header-tab-indicator-color) !important;
#--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 10px;
height: var(--header-height) !important;
}
sl-tab[aria-selected=true]::part(base) {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
sl-tab {
color: var(--header-all-tabs-color);
--sl-tab-ink: var(--card-background-color);
border-radius: 25px;
height: 50px;
padding: 0 0.5rem;
margin-top: 12px;
--mdc-icon-size: 26px;
}
.main-title {
padding-bottom: 10px;
}
.mdc-icon-button {
padding-bottom: 10px;
}
ha-icon-button-arrow-prev {
padding-bottom: 10px;
padding-left: 20px;
}
2 Likes
If I add
::-webkit-scrollbar {
background: red;
}
in inspector, I get the scrollbar in Chrome colored.
Any way to ingest it via card_mod-themes as well?
Currently neither
card-mod-view-yaml: |
.: |
::-webkit-scrollbar {
background: red;
}
nor
card-mod-root-yaml: |
.: |
::-webkit-scrollbar {
background: red;
}
have any effect.
I have a question that seems to be simple, but Iāve been trying to get it to work for hours and no success. Iām new to jinja & card mod so I can only assume Iām missing something really obvious.
Conditional formatting on my card works:
type: tile
entity: sensor.power_state
features_position: bottom
vertical: false
hide_state: false
grid_options:
columns: full
name: test
card_mod:
style: |
:host {
{% if states['sensor.power_state'].state == 'a' %}
--card-mod-icon-color: green;
{% elif states['sensor.power_state'].state == 'b' %}
--card-mod-icon-color: yellow;
{% elif states['sensor.power_state'].state == 'c' %}
--card-mod-icon-color: red;
{% endif %}
}
Styling the card works as well:
type: tile
entity: sensor.power_state
features_position: bottom
vertical: false
hide_state: false
grid_options:
columns: full
name: test
card_mod:
style:
ha-tile-info$: |
.primary {
line-height: 1.55em !important;
font-size: 1.55em !important;
color: cyan !important;
}
.secondary {
line-height: 1.3em !important;
font-size: 1.3em !important;
color: red !important;
}
But I canāt figure out how to combine both. Either the conditional colors stop working and/or the styling is not applied
- Wrong thread. Should have been asked in the ājust card-modā thread, this one for themes.
- As for combining; go to that main card-mod thread - 1st post - fantastic link - other stuff - combining.
seems to be another Safari issue, I also noticed it and posted in custom:custom-sidebar repo
let me find the answer Elchininet gave
found it: scrollbar-thumb-color no longer sets the scrollbar thumb in Safari and companion app Ā· Issue #413 Ā· elchininet/custom-sidebar Ā· GitHub
nothing we can do other than report it in HA Frontend repo, which I did in scrollbar-thumb-color no longer sets the scrollbar thumb in Safari and companion app Ā· Issue #25442 Ā· home-assistant/frontend Ā· GitHub
No, unfrotunately donāt think so. This is windows chrome and not the bars, wich are set from HA UI (they are working). This is browser UI. And it is working with the first approach in developer tools. Iām only not able to set it via card_mod themens at the moment.
well as far as we could find it was caused by
the issue is that Safari since version 18.2 supports scrollbar-width. So when this property is set, it removes all the customisations made with ::-webkit-scrollbar.
and has the exact effect you describe:
can set it in Inspector, works in Chrome, but not via card-mod theming or regular theming for that matter (which is even more of a bummer)
scrollbar-thumb-color: red
in the browsers Safari and iOS app, and the native Home Assistant app on Desktop
