Support for dark themes

[GitLab-sgart]

I use Home Assistant in darkmode (Google Dark Theme or the Caule dark themes) which works fine normally. But with the Google Dark Theme, the Buttons don't change at all and it looks pretty horrible when I apply one of the Caule dark themes.

I don't know why dark themes aren't working with the card, obviously some css stuff which I unfortunately don't know much about. Would be great to see those themes supported in the future.

A temporary solution is editing the styles with the card-mod integration. This solution has some problems though. First: I had to change multiple variables/classes to make it look at least similar and Second: I had to hardcode color codes because the variables where the wrong color most of the time.

Dashboard with the "Caule Dark Blue" theme applied

Dashboard with the "Google Dark Theme" theme applied

[mattieha]

@Another-sgart Thanks for your feedback. What version of the Slider Button Card and Google Dark Theme are you using?

This is what Google Dark Theme v1.9 looks like for me:

[GitLab-sgart]

I've installed both via hacs. Slider Button Card is on 1.5.2, Google Dark Theme on 1.9.

[1Yanik3]

I have google dark theme 1.9, Home Assistant 2021.6.6, and Slider Button Card v1.5.2, and I have exactly the same issue (both on web, android, and desktop)

[1Yanik3]

I don't know if this is intended or something, but the slider-button-card adds all these variables inline, that overwrite the normal home assistant theme colours (like for the background, shadow, and pretty much everything else)

[mattieha]

That's really strange, that's not intended at all:

Not sure why it's happening, I'll try to reproduce it and fix it.

[GitLab-sgart]

Might be another HACS integration interfering with the card. Maybe the Slider Entity Row card. I think they both use the "slider" class.

[1Yanik3]

Might be another HACS integration interfering with the card. Maybe the Slider Entity Row card. I think they both use the "slider" class.

I tried uninstalling the slider-entity-row card and it did not fix the issue

[mattieha]

I use the slider-entity-row myself, so that can't be the problem. Is the theme global set (via Profile) or on the view or card directly?

[GitLab-sgart]

It's globally, but it doesn't work with neither

[mattieha]

What happens if you add theme: "Google Dark Theme" to the root card config?

[GitLab-sgart]

How do I do that?

[mattieha]

Edit the card, then click on "SHOW CODE EDITOR" button.

[GitLab-sgart]

Fixed it for standalone cards and those in grids. But doesn't work for auto entities.

[GitLab-sgart]

Ok.. uhm... This is weird... I retried it and now it works for light entities but the switch entities are still white.

Edit: Nope, retarded me forgot to add the theme to both. Foxed it for all cards and entities. Thanks!

[1Yanik3]

Thank you, this fixed it for me aswell

[mattieha]

Nice that it works for you guys this way, I'll still try to figure out what the actually problem is. Would be nice to not have this added manually to every card...

[GitLab-sgart]

I don't have much time, but I can try to find out which integration breaks the theming and why later.

[MitjaHenner]

It works for me but why do I get those strange artifacts on the right corners? (Same as in the pictures above?)

[1Yanik3]

have there been any updates on this?

[1Yanik3]

@mattieha @Another-sgart I figured out what the issues was, I set my theme with 'frontend.set_theme'. Upon using that to set the theme to 'none', it will adapt just perfectly

[VNRARA]

It seems fixed but the dark colors are slightly off.