Add the options dark_mode_filter and dark_mode_image to the picture elements card

[Santobert]

Proposed change

Allows to enable different filters, depending on whether the dark mode is activated or not. You can also use a completely different image.
This makes the icons better visible and the background colors are more eye-friendly. In addition, you can now read white text like the one below the badge.

Before

After

This is necessary when different devices use different color schemes. For example, my smartphone uses dark mode by default, while the computer usually uses light mode.
This also works combined with state_filter since we stack filters in hui-image.ts.
I am not really happy with the name of the option. Suggestions are welcome!

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

type: picture-elements
elements:
  - type: state-badge
    entity: binary_sensor.updater
    style:
      top: 32%
      left: 40%
image: 'https://demo.home-assistant.io/stub_config/t-shirt-promo.png'
dark_mode_image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
dark_mode_filter: 'invert(100%)'

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request: Add the options dark_mode_filter and dark_mode_image to the picture elements card home-assistant.io#15169

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

I'd rather allow people to set styles or a different image based on whether it is in dark mode. Inverting the image will not work in all use cases.

[Santobert]

I'd rather allow people to set styles or a different image based on whether it is in dark mode. Inverting the image will not work in all use cases.

What would you suggest? Something like the following?

type: picture-elements
elements:
  - type: state-badge
    entity: binary_sensor.updater
    style:
      top: 32%
      left: 40%
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
dark_image: 'https://demo.home-assistant.io/stub_config/floorplan_dark.png'

I'd default to the image and only use the dark_image if it exists and dark mode is enabled.

Another option would be to allow filters that are only applied when the dark mode is enabled.

type: picture-elements
elements:
  - type: state-badge
    entity: binary_sensor.updater
    style:
      top: 32%
      left: 40%
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
dark_mode_filter: invert(100%)

What do you prefer?

[bramkragten]

Something like state_image and state_filter:

https://www.home-assistant.io/lovelace/picture-entity/#state_image
https://www.home-assistant.io/lovelace/picture-entity/#state_filter

So I would say both?

[Santobert]

So I would say both?

Done. What do you think?

[bramkragten]

Looks good, I'm missing a should update in these files, I think the performance is not optimal. But that is something for another PR.

[Santobert]

Is there anything else I have to do to get this merged? Or does it just need a little more patience? No hurry, if it is the latter 🤷