Badge color change

[Michelone86]

Hello, thank you so much for the excellent work you have done for the community, I am infinitely grateful!

I would like to ask you, how can I change the color of the badges?

Thank you! ps. I'll run to offer you a couple of coffees 😉

[neilimixamo]

Hi @Michelone86 , thanks for your encouraging feedback.

I assume 'badge' is referring to the whole 'Timer' card, which you'd like to change from purple to another color, is that correct?

There could be several ways to change cards colors so, to help you effectively, could you please tell me first if you'd like to change some individual cards or more globally, the overall theme of the 'helper' template?

[Michelone86]

Hello @neilimixamo, I created a new template called "irrigation", copying the "light" template.

So I would like to change the color of the irrigation theme badges from yellow to light blue. But there are also other colors that I would like to change, for example I would like the open doors to be green instead of red.

In my house, green is identified as "open, free", red instead is identified as "closed, stop", I would like to change the colors of your project to make it more homogeneous with my home automation 😅

Thank you ✌🏻

[neilimixamo]

Regarding your irrigation card, since it's a new template similar to the light template which uses yellow as its color code, the simplest approach would be to replace all 10 'var(--light-...)' variables with 'var(--fan-...)' since the fan card displays the light blue theme you desire.

For the green color of an open door, you'll need to modify the securitytemplate and adjust the color-defining variables. To achieve a green theme that integrates well with both light and dark modes, you could simply change 'var(--security-...)' to 'var(--media...)' at lines 29, 85, and 108.

I have opted to work with color-variables defined in a theme file for practicality, aiming for system-wide changes, but if you prefer to create a personal template, you can set your desired colors using HEX codes like '#e12939' instead of 'var(--xxx-...)'

I hope this guides you in the right direction. Feel free to ask if you want to delve deeper and don't hesitate to share screenshots or code.

[Michelone86]

Thank you so much, your suggestions helped me a lot! I'm closing the topic, thanks 😉