I want to change the color of all the things in red ā¦
I didnāt find anything about it . The for your help.
Hi,
I have a set of hui-badges, all card-modded, mainly to add icon animations. I also style those with a theme as follows:
card-mod-card-yaml: |
.: |
ha-card.type-custom-mod-card {
--ha-card-border-width: 0px;
--ha-card-box-shadow: inset 0px -2px 7px rgb(from var(--MainThemeColor) r g b / 0.9),
0 3px 5px rgb(from var(--primary-text-color) r g b / 0.25);
}
This works fine but I apply that mod to all custom mod cards and didnāt limit it to the badges, so if I now also want to mod some chips the same theme elements are applied. New to CSS, shadow roots and the like and I cannot seem to wrap my head around this, how do I theme mod specific classes?
FYI: I do not need the custom-mod-card for the chips, but I assume there is a way to tell my theme I only want to apply does changs to the badges and I donāt like that I donāt know how to do that 
believe it or not, but I have never tried to set a border-radius on the more-info touch elements, like the slider or toggle
ever since these were made a lot wider than before, my eyes clash on the sheer size of them, and the rounded corners look even less attractive in my āsquaredā themes.
If I set those radiusās in inspector, it changes to
which suits the underlying group members much better, now they are also styles with the ha-card-features-border-radius
weāre talking about the .slider and the .slider-track-bar set to 0px. has anyone tried that successfully?
if so please share? I do so hope this can be made into a generic more-info-feature classā¦
fwiw, I did open this FR in the discussion section for a dedicated theme variable
Edit: my bad, havenāt checked the subforum before posting 
2025.10 broke the .secondary:after content trick:
Notice how the part starting with āø± is on the new line. It should be (and has been prior to 2025.10) on the same line.
Any ideas how to fix that? Thanks
The card code:
type: custom:auto-entities
filter:
include:
- domain: automation
options:
type: tile
icon: mdi:robot
state_content: last_triggered
hold_action:
action: more-info
tap_action:
action: more-info
double_tap_action:
action: none
layout: horizontal
card_mod:
style:
ha-tile-info$: |
.secondary:after {
visibility: visible;
content: "{% set area = area_name(config.entity) %} {% if area %} āø± {{ area }} {% endif %}";
}
exclude:
- attributes:
last_triggered: null
- hidden_by: user
sort:
method: last_triggered
reverse: true
ignore_case: false
numeric: false
count: 10
show_empty: true
card_param: cards
card:
square: false
columns: 1
type: grid
Related post: Tile Card - Changing secondary info text using template - #15 by DeckardCain2014
not the same as classes in card-mod theming, but you can inject an !include with repetitive code
save the mod in a folder in your config
# badge border shadow
style:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
box-shadow: var(--box-shadow-badges) !important;
}
# .: |
# ha-state-icon {
# --mdc-icon-size: 24px;
# }
and next inject it in the badge
#badge alarm control panel
type: entity
entity: alarm_control_panel.ha_main_alarm
card_mod: !include /config/dashboard/card_mods/badge_border_shadow.yaml
(NOTE: I am using the card_mod 3.5.0 / 4. alpha version, so if you are still on the current release, you need the mod-card still probably.)
Doesnt change the technique of injecting !includes I wanted to illustrate
This is not really a query about themes is it?
The main card_mod thread is where youāll likely get a better response, especially this post by Dcapslock.
1 Like
I am indeed on card_mod 3.4.5. I only use / need the mod-card on the badges so for now I can continue applying my theme. When that changes I will test your !include technique to keep the mod in one place (but outside my theme) instead of copying it in every badge. Or, I upgrade to card-mod 3.5.0, remove the mod-card and theme the badges. So you have given me two options thanks!
Just a report for the 4.0 beta 1 version:
Everything appears to be working fine with my card mod themes.
2 Likes
update to 4.0.0 beta and all will be well without the need for mod-card.
1 Like
Or not.
Must have been looking at a cached version.
It has broken my theming. Nothing obvious in the console.
Header fonts and padding are ok but card backgrounds are not.
card-mod-theme: day
card-mod-card: |
h1.card-header {
font-size: 20px;
font-weight: 300;
letter-spacing: 0px;
}
ha-card.top-level-card {
border: solid 1px var(--primary-text-color);
background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
}
ha-card.top-level-card h1.card-header {
padding-top: 0px !important;
padding-bottom: 28px !important;
}
I donāt use themes much so not too familiar with what ha-card.top-level-card { points toā¦
What do you get with this? 
ha-card {
border: solid 1px var(--primary-text-color);
background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
}
I see this, but changed the border color to red for confirmation.
Is top-level-card a custom class? If so you need to update theme as per release notes.
BREAKING
Due to the change from patching
<hui-card>in preference of<ha-card>there may be some changes required to your card_mod targets and/or styles as the class will now be on the card element (child of<hui-card>) rather than<ha-card>. For example, if you have targeted your CSS style rule toha-card.myClass { ... }, the best direct change is to use:host(.myClass) ha-card { ... }.
So for youā¦
:host(.top-level-card) ha-card {
...
}
Yes it is. I donāt understand any of this:
Is that in my theme or in each and every card I use this in?
card_mod:
class: top-level-card
Ho would I apply it to my example code above?
Only needed in your theme. The following should work.
card-mod-theme: day
card-mod-card: |
h1.card-header {
font-size: 20px;
font-weight: 300;
letter-spacing: 0px;
}
:host(.top-level-card) ha-card {
border: solid 1px var(--primary-text-color);
background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
}
:host(.top-level-card) ha-card h1.card-header {
padding-top: 0px !important;
padding-bottom: 28px !important;
}
1 Like
Thanks. Thatās a lot of changes Iāll have to make. Iāll give it a go this weekend and test the beta again.
Honestly this sort of ābusy-workā maintaining my dashboards is getting to be a bit of a pain. As soon as they fix the day / night core theme to be able to be switched with an automation Iāll probably ditch all my theming.
2 Likes
I am having an odd scenario. Without changing my theme coding about 80% of my dashboard works.
When i change my ha-card.class { to :host(.class) ha-card {
to accommodate the other 20%ā¦then about 20% of my theme works and 80% is broken.
X UI:
card-mod-theme: X UI
card-mod-card: |
ha-card.x-ui { #### :host(.x-ui) ha-card {
border-style: none
background-color: var(--primary-background-color);
box-shadow: var(--my-card-shadow);
}
And using via card-mod: class: x-ui
Any help is appreciated.
Thanks
Any examples of what works / does not work with v4.0.0-beta.1?
Hard to provide examples that would make sense here, I have a very nested config using both streamline-card, button-card and some yaml anchors sprinkled in. Ruling out streamline-card, i think my issue lies with button-card not respecting the new config. Need to dig a bit deeper then can open an issue on that side.
Edit: The issue actually may be streamline-card. Anyone else having issues?
Edit2: Rolling back fixes all issue.
Can you share a minimal config. I am not familiar with streamline-card. Issues can be interaction of custom cards so having a miminal config that replicates what you are seeing will help track down what has changed.