Here is a diff between your code & my code (with trimmed spaces):
I do not know why it does not work in your setup.
Do other card-mod examples work?
I do not know why it does not work in your setup.
Do other card-mod examples work?
Uhh, the problem was withc card-modā¦ cool, it works now - almost 
for some reason the color display different (darker) as on other icons (state-icon / switch, coloring works perfect without card-mod):
Is there a way to style the icons on the tab headers? I would like to change those from outline to filled versions if the room it represents is active (or similar).
Search in card-mod themes thread.
1 Like
Most probably, there is a filter or a transparent or alpha set as well, which you should adjust according to your needs.
See above
Why the āmod-cardā is here?
190 lines for MWE - and zero appearances of ācard-modā keyword.
1 Like
I cant get card-mod to work, anywhere.
Its installed correctly, but all I get when adding
style: |
ha-card .entities {
color: red;
}
to a card yaml is
Visual editor is not supported for this configuration
Key āstyleā is not expected or not supported by the visual editor.
You can still edit your config in YAML.
ā¦and text color is not red. Ive tried many other kinds of stylings too, with the same result. What basic thing can I have gotten so laughably wrong?
Its the same if I add ācard_mod:ā, as in
card_mod:
style: |
ha-card {
color: red;
}
SOLVED IT!
- I went through everything twice and found nothing wrong with card-mod, it loaded correctly and everything. Then for some reason I thought of HomeKit Infused which I had downloaded but not configured completely because it is all YAML-based. I deleted everything HKI related and restarted HA and voila! Text is red!
1 Like
You are right, this should be in Layout-card - Take control of where your cards end up
Deleting post ā¦
hey, just looking for s beginner help
below is a sample my code and image for reference, but all i want to do is round the corners and be able to apply a line colour. Im just unsure where to even add the styling? if someone is able to help me out here, im hoping it will go along way to learning it? cheers
type: custom:stack-in-card
title: Indoor Climate
mode: vertical
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.whole_house_average_humidity
icon_color: green
- type: entity
entity: sensor.whole_house_average_temperature
icon_color: blue
- type: template
entity: climate.ac_controls_interface
How to change card-mod styles for dark & light modes
There are 2 methods of changing a card-mod style dependingly on the current HA theme:
- Use a user-defined variable for some CSS property.
Specify some user-defined variable for the light theme & for the dark theme:
### styling
card_mod:
style: |
some_element {
color: var(--my-favourite-color);
}
...
## defining themes
my_theme:
modes:
light:
...
my-favourite-color: black
...
dark:
...
my-favourite-color: white
...
This method implies that a custom theme (āmy_themeā) is defined.
If a default theme is used then the 2nd method may be used.
- Use different card-mod styles dependingly on the current mode - light or dark.
A client device has at least the light mode; the dark mode MAY BE provided too.
Switching between modes may be at automatic (dependingly on a current time) or manual.
HA has 3 options for a default theme:
- automatic selection (if the client device is in light mode then the light theme is selected; same for the dark mode);
- light & dark themes (set a theme independingly on the client deviceās mode).
Here are these options for the default theme:
Regarding a custom theme: if both light & dark modes are specified for the theme then these options are same:
But if no light or dark modes are specified then there are no options:
So, this method implies that:
- either the default theme is used;
- or a custom theme with specified light & dark modes is used.
There is one more condition - the āAutoā mode must be selected (if device is in dark mode ā use a dark theme, and vise versa).
Now finally about the method itself.
A special CSS media feature is used to determine a current mode:
type: entities
entities:
- entity: sun.sun
name: cyan if DARK
card_mod:
style:
hui-generic-entity-row $: |
@media (prefers-color-scheme: dark) {
state-badge {color: cyan;}
}
@media (prefers-color-scheme: light) {
state-badge {color: red;}
}
In the light mode the icon is of red color:
If the current option is ādarkā:
then the iconās color is still red:
because the mode is still light - only the dark theme is selected!
Now set the āautoā option:
switch on the dark mode (for Windows 10: Settings ā Colors):
and the iconās color is cyan - as it should be:
BTW, for testing purpose Chrome has a ādark mode emulationā feature.
7 Likes
Thank you for this! I was banging my head against this for a while, and while I absolutely could not get the @media (prefers-color-scheme.. option working, custom variables in themes did work! Iāll keep playing with the @media option later, as that would be the most theme-agnostic (my gf uses an ios theme whereas I use Mushroom theme, so Iāve had to throw custom vars into both for now, bleh).
Thisā¦this is gold for anyone that wants to change up all the default settings and make their own style.
I do have a question though. Can you get to any part of a card by just appending ā.header .nameā for example to āha-cardā like shown below? I notice you dont do it on all your examples and wanted to confirm if this only works for some cards or all.
style: |
ha-card .header .name {
color: green;
}
Post liked and bookmarked. Thank you.
Not sure if I am getting your point.
Yes, we can get to any part by using a correct path.
In this particular example there is no need to use āha-card .header .nameā, the ā.header .nameā is enough.
In some my examples I did use the āha-cardā in these cases (I was at the very beginning), but usually it is not obligatory.
Currently I am using āha-cardā only in āstyle the whole cardā cases (i.e. not for some specified element).
Wondering if I can get some help with a template in card mod to turn the card background a certain color based on an entityās attribute. Iām terrible with templates and just started with Card-mod so I hope this isnāt too stupid of a questionā¦
I have this but it isnāt working.
card_mod:
style: |
ha-card {
background: [[ if (states.climate.z_wave_thermostat_2.attributes.hvac_action == "cooling", "blue",) else if (states.climate.z_wave_thermostat_2.attributes.hvac_action == "heating", "red",) else if (states.climate.z_wave_thermostat_2.atrributes.hvac_action == 'idle', "grey")]];
}
Thanks!
Use jinjia2 for templates.
Like this:
card_mod:
style: |
ha-card {
{% if ....... %}
background: cyan;
{% else %}
background: red;
{% endif %}
}
Awesome, thank you so much. Was able to get it working.
How should the correct entry for ācondtional rowā look for secondary info to appear?
- entity: input_number.pc_grzejniki_obnizenie_stalej_temp_wody
secondary_info: true
card_mod:
style:
hui-generic-entity-row$: |
.secondary::after {
content: "{{states('sensor.pc_grzejniki_obnizenie_stalej_temp_wody')}}"
}
- type: conditional
conditions:
- entity: switch.pc_grzejniki_metoda_pogodowa
state: 'on'
row:
entity: input_number.pc_grzejniki_krzywa
secondary_info: true
card_mod:
style:
hui-generic-entity-row$: |
.secondary::after {
content: "{{states('sensor.pc_grzejniki_obnizenie_stalej_temp_wody')}}"
}
I have tried variants with āhui-conditional-rowā but without success. Could you
please help me?
1st post ā link at the bottom ā post with links ā link for conditional
Thank you. I got the expected result after applying.
style:
hui-input-number-entity-row$:
hui-generic-entity-row$: |
.secondary::after {
content: "{{states('sensor.pc_grzejniki_obnizenie_stalej_temp_wody')}}"
}