šŸ”¹ Card-mod - Add css styles to any lovelace card

i can change the color in devtoolsā€¦

but dont know how to use it in my code

Hi there!

I have a bunch of temperature sensors that show ā€œHotā€, ā€œColdā€ or ā€œOKā€ based on the room temperature.

I want to diplay these in a history graph with the bar color being red for ā€œHotā€, blue for ā€œColdā€ and green for ā€œOKā€. How would I go about doing this?

Thank you kindly!

take a look at Apex Charts card that should do what you want/need

1 Like
type: history-graph
entities:
  - sun.sun
card_mod:
  style: |
    ha-card {
      --state-sun-above_horizon-color: red;
      --state-sun-below_horizon-color: violet;
    }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

Update: unfortunately, theme vars are not supported for ā€œsensorā€ domain:


So, this method will not work.

2 Likes

Most probably not solvable (without following problems) via card-mod, but does anyone knows, how to set the variable

ā€“control-select-background

from the thermostat card?

Ofc I can set it in card_mod and I can try to unset the transitions, ā€¦ but because of loading order, card-mod ingestion, ā€¦ I do not get it to work without transition.

So I thought to set it in the theme, but it does not work. Because it is set to inactive color in the card, I think hard-coded.

So, long story short, any chance to get --control-select-background in another color (without the transition problem), that is the background color of the hvac box.

image

Or to modify or better copy and change the inbuild thermostat card, ā€¦? E.g. Same way as for inbuild integrations? Or ā€¦

May be I am missing smth - but see no transitions neither on loading a view nor on switching modes:

type: thermostat
entity: climate.ecobee
features:
  - type: climate-hvac-modes
card_mod:
  style:
    hui-card-features $ hui-climate-hvac-modes-card-feature $: |
      ha-control-select {
       --control-select-background: red;
      }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

1 Like

Havenā€™t looked at your request in detail.

type: thermostat
entity: climate.living_room
card_mod:
  style:
    ha-state-control-climate-temperature:
      $: |
        .icon-button {padding: 10px;}
        .label ha-svg-icon  { color: red !important; }
        .target-button { color: red !important; }
        .label:nth-of-type(1) { color: yellow !important; }
        .label:nth-of-type(2) { color: cyan !important; }        
        .target-button:nth-of-type(1) { color: lime !important; }
        .target-button:nth-of-type(2) { color: blue !important; }
        .buttons ha-outlined-icon-button:nth-of-type(1) {
        --md-sys-color-outline:purple !important;}
        .buttons ha-outlined-icon-button:nth-of-type(2)
        {--md-sys-color-outline:lime !important; }
    ha-state-control-climate-temperature$:
      ha-control-circular-slider$: |
        .high {stroke: red !important; opacity: 1 !important; 
                }
        .low { stroke: blue !important;
               opacity: 1 !important; 
                }
        .arc { stroke-width: 10px !important;}
        .background {
                stroke: pink !important;
                opacity: 1 !important; 
                stroke-width: 10px !important;}
        .target-button { color: red !important; }
    .: |
      .title {
                font-size: 14px !important;
                color: cyan !important;
                text-align: left !important;
                background: #262626 !important;
                 }
      ha-card {
        background: black !important;
          }

Unfortunately your is already better then mine, via host variable or direct background e.g.

                      type: thermostat
                      entity: climate.klimaanlage_schlafzimmer
                      features:
                        - type: climate-hvac-modes
                          hvac_modes:
                            - cool
                            - heat
                            - 'off'
                      card_mod:
                        style:
                          hui-card-features:
                            $:
                              hui-climate-hvac-modes-card-feature:
                                $:
                                  ha-control-select:
                                    $: >
                                      :host {
                                        --control-select-background: red !important;
                                      }
                                      .container::before {
                                        background: blue !important;
    
                                      }
                                      div::before {
                                        transition: background 5s !important;             
                                      }       

where you can see (extended transition here to 5s) that there is a transition.

Most probably less or esp. more visible depending on number of card-mods on the page, complexity of the page, browser speed, ā€¦ but there is and currently I cannot unset the transition completely here, because card mod has to be loaded and applied and then the transition starts.

But yes, yours is already better than mine. Thx.And perhaps you are right and what I expect to see as still transition in your way is only the load order flickering. Iā€™ll see.

To set the variable of the framework somewhere in theme or code modification is not possible, is it?

yes, using the same on the preset-modes card:

      type: tile
      card_mod:
        style:
          hui-card-features $ hui-climate-preset-modes-card-feature $: |
            ha-control-select {
             --control-select-background: skyblue;
            }
          .: |
            ha-card {
              --primary-text-color: var(--primary-color);
            }

can also add the --control-select-color: red; there to get:

which is ugly ofc, and only for illustrating purposes

btw, we can also use

             background: skyblue;
             color: yellow; #color the non selected icons on the buttons

that background is the full color, not the filtered --control-select-background, might be useful.

the control number buttons:

      card_mod:
        style:
          hui-card-features $ hui-target-temperature-card-feature $: |
            ha-control-number-buttons {
              color: green;
              --control-number-buttons-background-color: skyblue;
            }

there are more variables to play with, at least this show a direct path to touch them:

But it is not reducing the load order flickering or perhaps transition here as well.

For me the ā€œproblemā€ is, that I cannot set this variable on top of the page or in theme, because it is hard-coded to

ā€“control-select-background: var(ā€“disabled-color)

in the card. So I am searching a way to set this variable ā€œsomewhereā€, where it is applied directly everywhere. But I think it is not possible because of the line above.

I see, yes, sorry to hear you have a bad UX on that. Not seeing real trouble in my dashboard, though I admit, the mod is not applied directly upon reload, it needs a very short time to kick in.

not on revisiting though, I believe it then is immediate No it is notā€¦ especially not after changing dashboards in the left side menu and returning to the view with the slider/buttons, I can see a very clear transition from the theme colors to the modded color.

wonder if a card-mod-theme setting like:


  card-mod-glance: |
    :host {
      transition: none !important;
    }

could help somehow, ofc adapted for these specific cards? Not sure I see any difference tbh, setting that to a card-mod-tile ā€¦

Strange, pasted my code on a test view with plenty of card-modded cards - still no transition.

Do not think this is possible due to that assignment to ā€œdisabledā€ color you mentioned.

As said, can be that it is only load-order-later-apply-flickering and no transition with your way.

But try to open it in a browser-mod pupup. There it is more obvious, because not cached and loaded on top of the dom every time again.

Or see it better with

                          hui-card-features $ hui-climate-hvac-modes-card-feature $: |
                            ha-control-select {
                             --control-select-background: none;
                             --state-climate-off-color: #414141;   
                             --state-climate-cool-color: #414141;                             
                            }    

So with off and cool color as well. Even later applied and with transition.

Or my other question: Do you have an idea to have these other colors working without transition as well, because the switching off of the transition is too late as well because of loading time and order ā€¦

Hi there,

I have few cards with many chips on them. Iā€™d like to change the icon within the chip based on a state of the respective entity. I found out I can change the icon like this:

card_mod:
  style:
    hui-buttons-base $: |
      ha-assist-chip {
        state-badge {
          --card-mod-icon: mdi:lightbulb-outline;
        }

I do now know how to insert a general condition thatā€™ll apply for all chips by referencing the respective entity. I am talking about something like this:

{{ if is_state(ā€˜config.entityā€™, ā€˜onā€™),ā€˜mdi:lightbulbā€™,ā€˜mdi:lightbulb-outlineā€™);

If someone could give me a short hint in the proper direction that would be awesome. thx

Best regards

To customize an icon of a particular chip:

type: entities
entities:
  - type: buttons
    entities:
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip:nth-child(3) {
            --card-mod-icon: mdi:car;
          }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

But in general customizing an icon for an entity should be done on a ā€œserver sideā€, not in UI.
Assume this is a binary sensor - then itā€™s icon depends on itā€™s device_class.
Another example - a template sensor/binary_sensor: icon may be defined in the template.
For a ā€œstatic customizationā€ - ā€œcustomizeā€ can be used.
Ofc in many cases an icon cannot be customized dynamically on the ā€œserver sideā€; then yes, use card-mod or similar frontend-based waysā€¦

Hi there. Maybe someone can tell me how card_mod can completely hide the action button that I named with ā€žonā€œ. There should be nothing there and no action should be performed when I click there.


type: custom:auto-entities
card:
  type: entities
  show_header_toggle: false
filter:
  include:
    - entity_id: scene.*
      state: 'on'
      options:
        action_name: 'on'
        secondary_info: last-changed
sort:
  method: friendly_name
  reverse: false
show_empty: false

Hello @Ildar_Gabdullin,

I know that in general customisation of icons should be done as you describe and this is also how I do it.

I want to change the icon based on state though, which I know how to do for a particular chip. I was wandering if there is an easier way than defining an if-then for each entity. Is there?

Assume you have 100500 cards with chip buttons.
Do you mean that some if these card have a chip button for sensor.xyz - and you need to specify a style for this chip button in ONE place - and then see it applied everywhere?

Hello @Ildar_Gabdullin,

Yes, that was the idea. There are around 40 chips, each for one switch and Iā€™d like to define in one place that if a particular switch is on the icon of the corresponding chip is changed. Is this possit?

Thx,
Zavjah

A switch entityā€™s icon has some default colors for on & off.
Do you wish to change them?
Only for chip buttons, not for other places?
For all cards? Or for some particular card?
Read this also.