Adding a "pressed" and "depressed" state

[Savjee]

Feedback by fitim

[domoson]

It would be awesome to have a way to visualize "on" and "off" state of an entity, like in "Most used" here: https://github.com/N-l1/lovelace-soft-ui/raw/master/images/UI_lights_page_dark_theme.png

Great job so far!

[Savjee]

Thanks for the feedback! I was thinking of adding support for templates to icon_color. Would this be an acceptable solution for you?

[domoson]

Same comment, with better formatting:

Wow, thanks for the prompt response!

Yes, template for icon_color would definitely be helpful, but what would be even better is:

1. in addition to template-able icon_color / font_color: implement default behavior (mainly for switches and/or lights that support on/off state), e.g. by default set icon_color = var(--primary-color) if state==='on'; else var(--text-disabled-color) [these CSS variables are only suggestions, not sure what is best practice]
2. have an even better visual representation of on/off using this "3D pressed down" effect (different style box shadow) as in the screenshot I posted earlier

If I can support in any of this with my very limited JS / CSS experience, let me know :-)

[Savjee]

Thanks for the suggestions.

I've just implemented your first suggestion in the dev branch and will push it live soon. I decided to handle it like this:

• By default, the text color is used as icon color.
• User can change icon_color with a HEX code or template
• User can set icon_color to auto, in which case it will look at the state of the entity

Makes sense? (Working on pressed/depressed state)

[domoson]

Sounds like exactly what I envisioned :) This and the pressed/depressed update will be a game changer. Thanks a lot!

[MEKadan]

Is there a solution for this already?

[Savjee]

@MEKadan No not yet. I was struggling a bit to make it work for both light and darkmode. Suggestions are welcome!