Need help dynamically changing my card based on HA theme (dark/light)

[vaibhav2912]

Hello,

I have created a card to show status of my washing machine. I used images instead of icons because I wanted to animate. I am currently using dark theme and so I created images with white color. Everything works perfectly. But when I switch over to light theme, understandably, I can't see my picture at all because white picture on white background.

Is there a way to change the picture I use based on HA theme?

type: custom:button-card
entity: sensor.washer_switchbot_plug_2_energy_power
show_icon: false
triggers_update:
  - sensor.washer_switchbot_plug_2_energy_power
tap_action:
  action: none
entity_picture: /local/floor_plan/assets/washing-machine-clothes.png
show_entity_picture: true
name: |
  [[[
      if (states['sensor.washer_switchbot_plug_2_energy_power'].state > 4)
          return "Washing";
      else
          return "Idle";
  ]]]
state:
  - value: 4
    operator: <
    spin: 0
    styles:
      entity_picture:
        - top: 48%
        - left: 35%
        - width: 28%
      name:
        - font-size: 30px
        - height: 80%
      card:
        - width: 145px
        - height: 170px
      grid:
        - position: relative
      custom_fields:
        notification:
          - position: absolute
          - left: 0%
          - top: 0%
          - width: 140px
          - size: 40%
    custom_fields:
      notification: |
        [[[
          return `<img src='/local/floor_plan/assets/washing-machine_frame.png'"
                  style="width: 130px; height: 130px;">`
        ]]]
  - value: 4
    operator: '>'
    spin: 1
    styles:
      entity_picture:
        - top: 46%
        - left: 35%
        - width: 28%
      name:
        - font-size: 26px
        - height: 100%
      card:
        - width: 145px
        - height: 170px
      grid:
        - position: relative
      custom_fields:
        notification:
          - position: absolute
          - left: 0%
          - top: 0%
          - width: 140px
          - size: 40%
    custom_fields:
      notification: |
        [[[
          return `<img src='/local/floor_plan/assets/washing-machine_frame.png'"
                  style="width: 130px; height: 130px;">`
        ]]]

Thank you, Vaibhav

[ildar170975]

1. I advise you to always post a SHORT code snippet (including definitions for required entities, uploaded pictures, ...) which everyone can use to simulate your case. The code snipped should include a functionality for the QUESTION only (i.e. for a picture which is supposed to be inverted).

2. Try using a filters for a picture dependingly on the current theme. Example (w/o this dependency):

   type: picture
   image: /local/images/host_iiyama.png
   style: |
   img {
   filter: invert(1);
   }

   

For dependency - check a community post for handling a dark theme (card-mod community thread -> 1st post -> link at the bottom -> find that post).

3. Similar questions are better to be asked in the card-mod community thread and leave Github for bugs & FRs.

[vaibhav2912]

@ildar170975 Thanks for the reply. I will keep your suggestions in mind for next time.

I found the post and now I am going through it.

Thanks.

[vaibhav2912]

@ildar170975 I am using a default theme right now. You mentioned in your post on community thread when discussing about default themes,

There is one more condition - the “Auto” mode must be selected (if device is in dark mode → use a dark theme, and vise versa).

My current requirement is specifically my tablet which is set to dark theme but I like to use light theme for home assistant. So I can't use this method. So I went with a good enough solution of adding a black drop-shadow behind my image so it works on dark and light theme.

I plan to look into setting up a user defined theme which is visually just like a default theme (light and dark).

Then use first method from the post with a user defined variable so I can use that across all the cards on the lovelace UI to make them compatible with (custom) dark and light theme.

Thank you, Vaibhav

[ildar170975]

My current requirement is specifically my tablet which is set to dark theme but I like to use light theme for home assistant. So I can't use this method.

If you change your theme for HA just by manually choosing a light/dark theme - a possible solution depends on whether you use a custom or default themes. If custom - create a user-defined variable like --picture-filter-invert and set it differently for light & dark themes; in the card you should use a style like filter: var(--picture-filter-invert); - as you already noted.

black drop-shadow behind my image so it works on dark and light theme.

This is a brilliant idea!