Would it be possible to set global variable colors to use with card modder? For example I use a background which is set globally by using background: var(--background-image) in my Lovelace setup. I wondered if this would be possible with card modder as well so that I can make changing themes.
Edit: Addition to the solution:
It is possible. I use this to set the border colour with card-modder depending on which theme (day or night) is set:
style:
border: solid 2px var(--primary-color)
Ok that is a bit what I thought would be possible, well that is great news! Thanks a lot. Will test this tonight and mark it as solved if it worked thank you!
Last question, would it be possible to define custom names? For example I set up a name in themes.yaml like test-color: 'red'
And define it in Lovelace as --paper-card-background-color: var(--test-color)
It is just a thought, but would be handy if that is possible.
No idea on that one.
@tom_l Thanks, it worked. I can also say that setting custom names work as well, I made the following config in themes.yaml:
testcolor: 'red'
and set then set this on a button-card
- type: 'custom:button-card'
entity: switch.test_button
styles:
card:
- --paper-card-background-color: var(--testcolor)
I hope this can help someone else that was wondering the same.
Hi @jimz011, does this testcolor work for you in the iOS app?
In FF they all work as expected, but in the app all custom-buttons show white.
Yes this works in the app! It is actually the device I test everything with as iOS is not able to display everything correctly (like border-radius on some cards). So I do all css testing on ios with the app.
Works fine for me, make sure you have the right profile and that you use the right code to call the colors from your themes.yaml file. I’ll post my current test color when I get back home.
Forget it, i’m an idiot!
Using another theme in the iOS app!