Icon colors changed at recent update

Configuration Frontend
1

Hello,

Since the last updatesI do have some trouble with icon colors.
I do have several cards configured like:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      border: 0px solid black;
      height: 690px !important;
      overflow: auto;
      font-size: 20px !important; margin-top: -10px;}
    }
card:
  type: vertical-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:stack-in-card
          icontap_action:
            action: none
          cards:
            - type: custom:mushroom-template-card
              primary: Gang
              card_mod:
                style: |
                  ha-card {
                    border: 0; --card-primary-font-size: 90% !important;
                    
                  }
              layout_options:
                grid_columns: 1
            - square: true
              type: grid
              color_type: blank-card
              cards:
                - entity: switch.verlichting_gang_boven
                  type: custom:button-card
                  tap_action:
                    action: more-info
                  double_tap_action:
                    action: toggle
                  name: lamp
                  styles:
                    name:
                      - font-weight: 500
                  show_icon: true
                  icon: mdi:lightbulb
                  card_mod:
                    style: |
                      ha-card {
                        border: 0; font-size: 12px !important;
                      }

Until the last update the icons had a kind of bleu color, when the state was ‘off’ and a kind of yellow when the state was ‘on’.
Now the icon is black or white (depening on de day or night mode of the device) when the state is ‘off’ and still yellow when the state is ‘on’.
Looks like:

Scherm­afbeelding 2025-05-28 om 22.03.25
Scherm­afbeelding 2025-05-28 om 22.03.25454×272 7.36 KB

How do I get the old colors back? (I do not want to undo the update). Can anyone help?

2

  1. Are you using a theme?

  2. You only provided code for the bulb, is that the icon you are referencing?

You have some code that odd…

An alternate version of the code you posted that eliminates the need for type: custom:mod-card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Gang
    card_mod:
      style: |
        ha-card {
          border: none;
          --card-primary-font-size: 20px !important; 
          --card-primary-line-height: 22px !important;  
         }
  - entity: switch.kitchen_lights
    type: custom:button-card
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    name: lamp
    styles:
      name:
        - font-weight: 500
      card:
        - border: none
        - margin-left: "-30%"
    state:
          - value: "off"
            styles:
               icon:
                - color: red
          - value: "on"
            styles:
               icon:
                - color: blue
    show_icon: true
    icon: mdi:lightbulb
    size: 3em
card_mod:
  style: |
    ha-card {
      border: none;
    }

You can also control the icon color in the custom:button-card using

    state:
          - value: "off"
            styles:
               icon:
                - color: red
          - value: "on"
            styles:
               icon:
                - color: blue
3

Hello,

Thanks for your sugestion, I will go to try it out. Strange that I now need to specify the value foor on/off and earlier it was not needed. But anyway, if that’s the trick: ok!

To answer your questions:

  1. I am not actively using a theme. The ‘default’ is selected
  2. I only showed the code of the bulb, but there are a lot more devices included in the card at the same way. Faar too much to copy to here.

The odd code is because on that part of the card I do not want to hav e reaction on a tap, on other parts I do want it, there is the tap/double-tap action specified

4

this was the odd code

icontap_action:

Just use

tap_action:
 action: none

I’ll look to see if there was a change to the standard default colors. I am playing catchup on the updates after getting back from vacation.

EDIT: It has changed

1 Like
5

In the latest HA release, some css variable have been removed. Is it possible that you where using some paper-* css variables for either card-mod or a custom theme? Happened the same to me after updating

6

Never used -paper-item…
But I solved by using

 state:
          - value: "off"
            styles:
               icon:
                - color: rgb(52,93,104)

Only thing: had to do it for all items individually.
The color for ‘on’ is not needed, works automatically