Applying themes to cards based on conditions

[stezak]

Does anyone know how to get this?

I’d like to have two themes (the primary theme and the reverse theme), and apply a theme to a card in real time based on conditions (for example states).
I’m not interested in card modder or custom button card. I’d like to use existing official lovelace cards.

[petro]

@stezak

I’m not interested in card modder or custom button card. I’d like to use existing official lovelace cards.

Good luck… You just made this exponentially harder for no apparent reason. It may even be impossible if the fields on the cards can’t be overridden.

[stezak]

There are reasons of course, that I have not mentioned here.
I have tested both enough and none of them gave me the final result I’d like to have.

[petro]

How were you not able to get what you wanted then? Use the conditional card to replace the card-modder with the un-doctored card and vice-versa depending on the state.

[stezak]

I wasn’t able using card modder, custom button card or custom ui. Each one has limitations preventing me from getting the needed exact final result.
The only way using conditional cards but as they are sitting inside a horizontal-stack card I’m hitting this open issue: https://github.com/home-assistant/home-assistant-polymer/issues/2167

See my test below:

This looks good:

This does not look good:

[petro]

Then your last ditch effort would be to utilize the template card, the card modder, and button card. Place the card modder card inside the template card, and the button card inside the card modder card.
Template the entire style section in card modder.

100% Templatable Lovelace Configurations

Lovelace Templates I’ve gone and made a crazy card that allows you to pretty much template anything in Lovelace for your card configurations using any information available on the frontend; states, attributes, user, etc. Want state/attribute-based icons? DONE! Want dynamic stacks; vertical vs horizontal based on user? DONE! Want OR conditionals? DONE! The list is pretty much endless and I’m sure you all will come up with some crazy stuff. Be sure to share. Go nuts! Enjoy!

[stezak]

Thanks, I’ll have a try.
I was also thinking of using card modder only on the two side cards in order to remove the extra unwanted space by CSS.

[petro]

I don’t think the card modder would work because it would need to go on the vertical stack. That’s what’s putting the spaces according to first response in the PR. You’d have to place it on the vertical stack and have that remove margins per element. Unless the margin is on the element itself. I really can’t say for sure.

[petro]

If you can get the template working, it would be a cleaner approach than the conditional card anyways. Seems like it would be less overhead.

[stezak]

Card modder didn’t work. As I wrapped my card with card modder card, the extra margin was applied to the card modder card instead of my card…

[stezak]

config-template-card worked great! I can change the theme of the card based on states