#Default button icon wont change color

1 messages · Page 1 of 1 (latest)

haughty compass
#

So i have a card set up to turn off a boolean to remind me to give my dog his medicine.

I got the background to be the red i want but the text/icon are still that blue and not white like i want. I used chatgpt to generate the code but it wont work still with going to white. Here is the code

type: button
tap_action:
action: toggle
entity: input_boolean.buzz_evening_pill_boolean
show_name: true
show_icon: true
name: Give Buzz his pill
visibility:

  • condition: state
    entity: input_boolean.buzz_evening_pill_boolean
    state: "on"
    card_mod:
    style: |
    ha-card {
    background-color: #cc0000 !important; # Darker red background
    color: white !important; # White text color
    opacity: 1 !important; # Ensures no transparency (fully opaque)
    }
    .card-content {
    color: white !important; # White text color
    }
    .name, .name > span {
    color: white !important; # White name text
    }
    .icon {
    color: white !important; # White icon color
    }
    .icon > * {
    fill: white !important; # Apply white fill to SVG icon
    stroke: white !important; # Ensure stroke is also white
    }
umbral acorn
#

ChatGPT doesn't know what it's doing and, generally, returns gibberish. Also, I think the inline comments messed with things at the same time. This is all you need: yaml card_mod: style: | ha-card { background-color: #cc0000 !important; color: white !important; opacity: 1 !important; --state-color: white !important }This was figured out by inspecting the card and finding the relevant variables being referenced.

image.png
haughty compass
#

that worked. thank you. I know chat GPT isnt the best but im not interested in learning the language