Card_light Rework color background

[basbruss]

Make background colors more inline with examples found on behance

Example with ulm_card_light_force_background_color: true

Old behavior:

• adds variable ulm_card_light_color to set manually the color when a light/switch is on

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• I have followed the contribution guidelines
  • This PR is for a custom-card or documentation change and therefore directed to the main branch.
  • This PR is for a official card or any other directly to the integration related change and therefore directed to the release branch.

[basbruss]

@benbur98 Inspired by the force background feature of the card_fan I have also implemented the same logic to the card_light 🚀

[benbur98]

Nice work!

I like the white text, it's way more readable than the coloured text previously - I'll check some of the other cards because we might have some inconsistency between cards after this which wouldn't look too good...

For the background, I'm not sure if I prefer the new bold colour in light mode or the old pastel colour personally.
Could make it a variable but aware that the card might get overly complex...

Custom color choice is great too.

[basbruss]

By looking at Behance the bold color background for any active state is definitely the way to go:

@schumijo want to you think on the design changes?

[benbur98]

Tested - Card works well :)

[benbur98]

For the Button Colours, what is anyone's opinion on the preferred choice:

Option 1 - Change Icon Only
Option 2 - Set Button Background to White and Icon to the Bard Background Color - this is most similar to the Behance image above
Option 3 - Do Nothing...

[basbruss]

@benbur98 Oh damn didn't test that feature haha.
Maybe give it the same values as the icon grid? Same is done with the oscillating button from the card_fan

[benbur98]

Good idea, this is with it matched to the icon grid.

Code I added to each button in the list is:

              styles:
                card:
                  - background-color: >
                      [[[
                        if (!hass.themes.darkMode) {
                          var color_set = variables.mui_card_light_enable_color ? entity.attributes.rgb_color : variables.mui_card_light_color;
                          var color = 'rgba(var(--color-' + color_set + '),0.2)'
                          if (variables.mui_card_light_enable_color) {
                            return 'rgba(250, 250, 250,0.8)';
                          }
                          if (entity.state != "on") {
                            return 'rgba(var(--color-theme),0.05)';
                          }
                          return color
                        }
                        return 'rgba(var(--color-theme),0.05)';
                      ]]]
                icon:
                  - color: >
                      [[[
                        if (!hass.themes.darkMode) {
                          var color_set = variables.mui_card_light_enable_color ? entity.attributes.rgb_color : variables.mui_card_light_color;
                          var color = 'rgba(var(--color-' + color_set + '),1)';
                          if (variables.mui_card_light_enable_color) {
                            color = 'rgba(' + color_set + ',1)';
                          }
                          if (entity.state != "on") {
                            return 'rgba(var(--color-theme),0.2)';
                          }
                          return color;
                        }
                        return 'rgba(var(--color-theme),0.9)';
                      ]]]

Can add it myself another day if you want, but I'm not currently on a machine with git.

[benbur98]

Sorry there was a bug in that code when not using the Collapse option, also some unnecessary parts.

Please change for:

                card:
                  - background-color: >
                      [[[
                        if (!hass.themes.darkMode && variables.mui_card_light_force_background_color) {
                          if (variables.mui_card_light_enable_color && entity.state != "off") {
                            return 'rgba(250, 250, 250,0.8)';
                          }
                        }
                        return 'rgba(var(--color-theme),0.05)';
                      ]]]
                icon:
                  - color: >
                      [[[
                        if (!hass.themes.darkMode && variables.mui_card_light_force_background_color) {
                          if (entity.state != "off") {
                            var color_set = variables.mui_card_light_enable_color ? entity.attributes.rgb_color : variables.mui_card_light_color;
                            var color = 'rgba(var(--color-' + color_set + '),1)';
                            if (variables.mui_card_light_enable_color) {
                              color = 'rgba(' + color_set + ',1)';
                            }
                            return color;
                          }
                        }
                        return 'rgba(var(--color-theme),0.9)';
                      ]]]