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.
Is there another way to hide the ha-tab icons. This one was working fine before one of the latest updatesā¦
card-mod-theme: "minimalist-desktop"
card-mod-root-yaml: |
.: |
ha-tabs$: |
paper-icon-button { display: none; }
I see this one in chrome dev-tools but adding one of them or both to my themes file seems not working.
.tab-group--top .tab-group__tabs {
display: none;
}
.tab-group__tabs {
display: none;
}