I do not see this button.
What version of HA you got?
Anyway, try apply a method used to hide a āSearchā button.
How to find it: huge card-mod thread ā 1st post ā link at the bottom ā themes ā hiding āsearchā
Ok, I will try. Thanks 
in a search to be as efficient with global card-mods, I was looking at the examples in the card-mod documentation, especially in the card-mod-themes cookbook section.
however, what is mentioned in those docs wont work for me unfortunately. I cant make a valid class out of this
style: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
}
I have this as an include, and use it on a binary entiy like
- entity: binary_sensor.washer_active
card_mod: !include /path/to/card_mods/active_icon.yaml
and it works very fine. Ofc, this is per entity, and Id love to set it on lets say all binary_sensors.
canāt we do that with card_mod_theme under card-mod-row: | ?
something like:
theme-mods:
card-mod-row: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
{% if state_attr(config.entity,'device_class') == 'running' %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
{% endif %}
}
edit
heck we canā¦ this does kick in now on my ārunningā binaries (Iāve set my threshold binary sensors to use that class, but they were showing play/stop icons, which I believe is a wrong choice for the class, because my washing machine is not a radio, and thus hope to PR that.
this will settle it in the frontend for the time beingā¦
Seasonās Greetings!!
Just wondering if anyone has been able to animate a sidebar iconās color - I couldnāt figure it out. Best attempt was this:
@keyframes rgb1 {
0%, 49% {
color: lime;
}
50%, 100% {
color: red;
}
}
a[data-panel='config'] paper-icon-item ha-svg-icon {
animation: rgb1 5s linear infinite;
}
I also removed the āha-svg-iconā, added !important to everythingā¦ An opacity animation works and the item-text can use the color animation but I canāt get the icons to do the same.
Thanks!!
card mod thread ā 1st post ā link at the bottom ā themes ā sidebar
You should define a path based on a REAL situation, not randomly.
Use Code Inspector.
Can I use card mod to correct the font ?
Where can I see what font is used in the other (correct) card ?
The wrrong font is in the custom:time-picker-card, other cards are custom:mushroom-template-card
As I really like what Ildarās card-mod code looks like for my entities cards, I wanted to add this to my theme as a global mod.
I failed over and over.
I will hide my inital post to make it easier to focus on the resulting question, but my journey to that conclusion is here:
Summary
Looking at this cookbook example I would have thought that I could use the per-card mod as follows.
Of course I am trying to modify entities card and not seconary-info, so the issue may well be there. But it looked like what I am looking for.
Tried yaml and non-yaml approach.
Here is the content of my themes.yaml file (I removed the non-card-mod parts)
frontend:
themes:
alex:
modes:
dark:
card-mod-theme: alex
card-mod-row: |
hui-generic-entity-row {
{% if states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: gray;
font-style: italic;
{% else -%}
color: yellow; #in case states(config.entity) is the problem, this should hopefully just turn everything yellow.
font-style: italic;
{% endif -%}
height: 2em;
}
:host {
}
However, it does nothing for my rows in the auto-entities-populated entities cards or manually populated entities cards.
I also tried card-mod-card, card-mod-root and even card-mod-entities as variables.
EDIT:
And now also tried
card-mod-root: |
hui-simple-entity-row:
$: |
hui-generic-entity-row {
{% if states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: gray;
font-style: italic;
{% else -%}
color: yellow; #just for testing
font-style: italic;
{% endif -%}
height: 2em;
}
EDIT2:
If the problem is, that the states(config.entity) is only available per row, then maybe there is a way to globally define the font-style and color for all cards if the state of any entity is e.g. āoffā?
EDIT3:
I feel like in a math exam where I need to āshow my workā 
So, I now also tried an example directly from the wiki
frontend:
themes:
alex:
modes:
dark:
card-mod-theme: alex
card-mod-row-yaml: |
:host {
display: block;
border: 1px solid yellow;
}
and only the one row I styled manually to test the example has a border:
I reloaded all yamls, reloaded themes, restarted HA. I am at a loss here.
I now found the problem: it is the placement in the dark mode. It works as soon as I place it in the root theme.
Does anybody then know how to make it selective for the dark mode (without creating a dedicated dard-mode theme, i.e. using the system ability to switch between auto, light and dark)?
I did take it out again, and use the identical mod in my auto-entities card, because I believe to notice that a generic mod like this in the theme-mod is very heavy for the system. Suppose it forces traffic from frontend to backend and back again on all views, and view changes for all entitiesā¦ given the generic check on all entities being a device_class of a certain type.
Taking this out again did immediately relieve the numbers. Just mentioning here, so people do check the effects of heavy āclassingā in their card-mod-themes
1 Like
Hi lldar , what do you use to mock up the device layout in as the gif. Thanks
Hi, could you elaborate, I do not understand your question.
just a heads up:
2024.1 beta broke all of my card-mod-sidebar-yaml: | mods, and I dont yet have a lead on why. the release notes speak of a changed selector chain:
- Selector chain tweaks.
a $ b $will now select the shadowRoots of allbs in the firsta.
but I am no sure why his would effect the side-barā¦
UPDATE
for another reason I had to logout and login again, and after that all my side-bar mods came backā¦ will update the issue and close it
1 Like
I am experiencing a strange behaviour for my entities cards.
When I have an entities card with my climate entities, the card is not themed properly for the climate entities with state āunknownā (you can see becaue temperature is ā0ā instead of the minimum 4.5).
Can anybody think of a reason why?
As soon as entities are no longer in state āunknownā, the mod works again.
hmā¦ maybe, someone can give me a short hint, whatās wrong with this mod?
cards:
- type: tile
entity: lock.eingang_treppenhaus_caina_locked_all
vertical: true
name: Beidseitig
card_mod:
style: |
ha-card {
{% if is_state('config.entity', 'locked') %}
--tile-color:var(--red-color) !important;
{% elif is_state('config.entity', 'unlocking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('config.entity', 'locking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('config.entity', 'unlocked') %}
--tile-color:var(--green-color) !important;
{% endif %}
}
the LOCK should be shown in green when unlocked - and red, when it is locked.
The template itself is working as expected, based on the template editor:
{% if is_state('lock.eingang_treppenhaus_caina_locked_all', 'locked') %}
--tile-color:var(--red-color) !important;
{% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'unlocking' or 'locking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'locking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'unlocked') %}
--tile-color:var(--green-color) !important;
{% endif %}
RESULT
--tile-color:var(--green-color) !important;
when switching the lock, the color will be set to amber, as expected - but the state locked / unlocked are switchedā¦
with the card mod, I want to overwrite the current theme-settings for the LOCK states, which are set like this:
state-lock-jammed-color: '#DA1A32' # Ruby
state-lock-locked-color: var(--green-color) #'#4CAF50' # Green
state-lock-pending-color: var(--amber-color) # Orange
state-lock-unlocked-color: var(--red-color) #'#F44336' # Red
how could anyone, if you dont show the mod you are trying to use?
It seemed like a quite general problem, but of course happy to show the mod 
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white;
--mdc-theme-primary: rgba(255,255,255,1);
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white;
{% elif states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey;
font-style: italic;
{% else -%}
{% endif -%}
height: 2em;
}
As you can see, none of the state conditions are met,so the minimum should be the changed spacing. But that is not applied either.
first of all, as I posted somewhere above, I would not recommend doing these complex templates on any available row in your HA frontendā¦ it will be very costly.
simply create 2 mods for script and climate, and apply those in the dashboard cards. It will be much cleaner, cheaper for the system, and more robust. it would require 1 time mod in an auto-entities card on those domainsā¦
but, if you still would want to make life difficult ;-), Id suggest taking it step by step.
first, take out the template and create a fixed mod for lets say a script entity. see if it works. for both the color and the font-style individually. or the height for that matter.
then, 1 step further, template the state for that script entity and see if things still work. If yes, then open up the template for the various domains.
btw it seems that the order in your template is incorrect, and the on/off should be nested inside the script (unless your also trying to mod things on climate being on/off)
honestly, again, why make it so difficult, while you simply use the theme colors HA provides natively? Do you really want to color all the names, instead of the icons?
1 Like
why not simply use other state-colors in your theme (since you apparently already use those, that would be most robust and supported from core)
Thank you for your thoughts
I am styling all entities cards no matter how they are created or what they contain. Even slider-entity-rows.
I wanted to reduce the spacing between rows and I wanted to change color and style of the entity name, the icon and the state. The combination gives perfect visible distinction between entity states.
The alternative would have been to style all entities cards manually depnending on what the content is. That is more work and more code per card that I find less convenient to alter due to the way the editor looks on mobile devices.
I have not noticed any system lags. Of course I am not checking the loads as such ao cannot comment if the cpu usage haa increased or not. But I observed no impact so far.
It also seems irrelevant which part of the code I remove as every single part is working. I can see it working on all my different cards.
Only if I restart HA and the climate state is āunknownā the card is not modded. As soon as the state is no longer unknown, the mods work.
Hey,
thanks - sorry ā¦ I really forgot to mention, that I need the themed color schemas for other lock entities
by default, the schema is correct - unlocked should be red, because then it needs my attention (house, car-door, etc)ā¦
But for other cases, like the cat flap, the ādefaultā and normal state should be unlocked.
btw: I got it working by replacing the config.entity with the actual entities name, like Iāve used it in the template section.
I donāt really see why it did not work here - but in all other cases where I change the tiles color by using config.entityā¦ 
ā¦seems like card-mod v3.4.0, broke both sidebar-yaml and root-yaml in Theme