Mushroom Card, locks with the *entity* card

[small path]

I'm using mushroom and tile cards for my dashboard (using the Sections view). For my locks I'm using the mushroom entity card because I can make the width narrower (resulting in 3 cards across vs. 2) than I can with tile cards. I'm not using the mushroom lock card because I don't like seeing the "extra" lock toggle that shows up on the right side of the card in addition to the icon.

The mushroom entity card animates the lock open/closed, but the color does not change from green > red like it does when you use the mushroom lock card (or a tile card). Is there anyway to get the color to match the state?

[pulsar imp]

You could apply a little bit of card_mod to get it to adjust the colors like you want. ```yaml
card_mod:
style: |
mushroom-shape-icon {
--icon-color: rgba(255,0,0,1) !important;
--shape-color: rgba(255,0,0,0.2) !important;
--icon-color-disabled: rgba(0,255,0,1);
--shape-color-disabled: rgba(0,255,0,0.2);
}

[small path]

Thanks!! I’ll give this a try and report back. Appreciate it!

[small path]

Doesn’t seem to work— the icon is always red, regardless of state, see the attached pictures (no changes to the code you provided)

[pulsar imp]

Interesting. Looking into it a bit more, it seems that when using a lock entity, there are different variables used. I'll have something figured out in a couple of minutes. I have a feeling that the card is not using the theme's variables, though...

[small path]

No clue if it’s easier or not to use the mushroom lock card, but I’m willing to if it’s possible to get rid of this:

(can you tell I haven’t messed with card mod much yet? 🙂 )

[pulsar imp]

I couldn't get it to work with the variables that I screenshot above; I may just not be getting the syntax right. It does make me curious how the card actually works that I may go look at the code to see what it is actually doing. This is a usable workaround though:yaml card_mod: style: | mushroom-shape-icon { {% if is_state(config.entity,'unlocked') or is_state(config.entity,'unlocking') %} --icon-color: rgba(255,0,0,1) !important; --shape-color: rgba(255,0,0,0.2) !important; {% endif %} {% if is_state(config.entity,'locked') or is_state(config.entity,'locking') %} --icon-color: rgba(0,255,0,1) !important; --shape-color: rgba(0,255,0,0.2) !important; {% endif %} }

[small path]

The workaround…works! Thanks for taking the time.

Aside from just working with card-mod a lot, are you just using the GitHub documentation or is there something else you’re referencing?

[pulsar imp]

I'm honestly not that great with figuring out card_mod on my own. There is a very good reference in the forum that covers a lot particularly for the Mushroom cards by dimitri.landerloos: Mushroom Cards Card Mod Styling/Config Guide
For stock cards, there's a post in the card_mod thread that is another great reference by Ildar_Gabdullin. Post 1396
Usually, when I'm trying to figure something out on my own, when I have the UI Editor open, I'll right-click next to the card and select Inspect. Then, there a "selector" tool that let's me select either the card or a specific element I'm looking to modify. In the case of this conversation, it was the icon. From there, I'll just look through and see what looks to be relevant.

Knowing that my initial attempt didn't work with a lock entity, I went looking through the Github code to see if there was something else that was "stopping" my code from working. In /src/utils/theme.ts, I found this: ```yaml
/* State lock colors */
--rgb-state-lock-locked: var(--mush-rgb-state-lock-locked, var(--rgb-green));
--rgb-state-lock-unlocked: var(
--mush-rgb-state-lock-unlocked,
var(--rgb-red)
);
--rgb-state-lock-pending: var(
--mush-rgb-state-lock-pending,
var(--rgb-orange)
);