Closed vaibhav2912 closed 2 years ago
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).
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).
@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.
@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
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!
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?
Thank you, Vaibhav