🔹 Card-mod - Add css styles to any lovelace card

Yes, I was a bit intrigued before your edit). Have seen your WTH and voted there already.

1 Like

got you ) that was the trick!
took some time, but I managed to modify the code, so it´s working now!

type: picture-elements
image: /local/floorplan/base.png
elements:
  - type: conditional
    conditions:
      - entity: light.tradfri_light
        state: "on"
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity: light.tradfri_light
        image: /local/floorplan/light.tradfri_light.png
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
          filter: var(--my-filter_tradfri_light)
          opacity: var(--my-opacity_tradfri_light)
    card_mod:
      style: |
        :host {
          --my-filter_tradfri_light: hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
          --my-opacity_tradfri_light: {{(states['light.tradfri_light'].attributes.brightness / 255)}};
          }
  - type: conditional
    conditions:
      - entity: light.rgb_bad_light
        state: "on"
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity: light.rgb_bad_light
        image: /local/floorplan/light.rgb_bad_light.png
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
          filter: var(--my-filter_rgb_bad_light)
          opacity: var(--my-opacity_rgb_bad_light)
    card_mod:
      style: |
        :host {
          --my-filter_rgb_bad_light: hue-rotate({{ state_attr('light.rgb_bad_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
          --my-opacity_rgb_bad_light: {{(states['light.rgb_bad_light'].attributes.brightness / 255)}};
          }          
  - type: state-icon
    entity: light.tradfri_light
    title: null
    style:
      top: 65.71%
      left: 68%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.2)
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.rgb_bad_light
    title: null
    style:
      top: 54.88%
      left: 80.45%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.2)
    tap_action:
      action: toggle

1 Like

Looking nice)