How To Change The Default Colour Of Button Icon When State = On

MFW4_cG_j4xf · January 31, 2024, 1:25pm

I am trying to change the default colour of a button icon when the state = On.

For example on the code below. I have a smart plug controlled by a button.

I can’t seem to figure out how to change the default colour of, yellow/amber to light-green.

Tried following various possible solutions I have discovered on the internet, but no luck

Is there an easy way to set the default button on colour from the yellow/amber colour to something different?

Below is my current code for my Grid Card Configuration :

square: true
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: more-info
    entity: sensor.bedroom_temperature
    show_state: true
    hold_action:
      action: none
    name: Bedroom
    icon: phu:bedroom
    card_mod:
      style: |
        :host {
            --paper-item-icon-color: grey
                                     }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.desk
    icon: phu:desk-stand-alt
    show_state: false
    hold_action:
      action: none
    card_mod:
      style: |
        :host {
            --paper-item-icon-color: grey
                                     }
  - type: custom:mushroom-light-card
    entity: light.bedroom_big_light
    icon: phu:ikea-jakobsbyn
    fill_container: true
    show_brightness_control: true
    show_color_temp_control: false
    collapsible_controls: true
    use_light_color: false
    show_color_control: false
    icon_color: light-green
    name: Light
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.corner_light
    icon: phu:smart-desk-lamp
    hold_action:
      action: none
    card_mod:
      style: |
        :host {
            --paper-item-icon-color: grey
                                     }
columns: 2

I have been able to make use of the below to change the default icon color to a grey.

card_mod:
      style: |
        :host {
            --paper-item-icon-color: grey
                                     }

Thanks.

MFW4_cG_j4xf · January 31, 2024, 1:26pm

Current colour when plugs are on = yellow/amber.

MFW4_cG_j4xf · January 31, 2024, 4:48pm

after some twiddling have manager to achieve this by the following code

type: custom:button-card
color: rgb(151,192,92)
color_type: icon
entity: switch.desk
//aspect_ratio: 1/1
icon: phu:desk-stand-alt
card_mod:
  style: |
    :host {
        --paper-item-icon-color: grey
         
                                 }

Now for the next problem, get the height of the button to match the others…

MFW4_cG_j4xf · January 31, 2024, 4:52pm

Forgot to add, i also had to install from HACS : button-card

MFW4_cG_j4xf · January 31, 2024, 6:00pm

This has further worked for me after playing around with

styles:
  card:
    - padding-top: 47px
    - padding-bottom: 35px
    - line-height: 35px

type: custom:button-card
color: rgb(151,192,92)
color_type: icon
entity: switch.ipad_charger
icon: phu:battery-charged
name: Anker Charger
styles:
  card:
    - padding-top: 47px
    - padding-bottom: 35px
    - line-height: 35px
card_mod:
  style: |
    :host {
        --paper-item-icon-color: grey
         
                                 }

This should work for any button instance that controls a smart plug.

On the screenshot below, the alignment does not look correct, in browser.

But looks fine on the iPad device that I use as my homeassistant dashboard, all aligned. ( you would just have to amend per your device resolution, trial and error)

Hopefully, somebody finds this useful. Pretty minimal basic dashboard, with custom icons, colours, layout and alignment.

Will post full code after I have updated all smart plug buttons.