Home Assistant Community

Applying themes to cards based on conditions

lovelace
Tags: #<Tag:0x00007f374f1f08a0>
#1

Does anyone know how to get this?
image
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.

0 Likes

#2

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.

1 Like

#3

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.

0 Likes

#4

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.

0 Likes

#5

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:
image

This does not look good:
image

0 Likes

#6

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.

1 Like

#7

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.

0 Likes

#8

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.

0 Likes

#9

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.

1 Like

#10

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…

0 Likes

#11

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

1 Like