v2.0.0-beta.2 Switch button styling only applies to "off" state, not "on" state
b-neufeld opened this issue · comments
I posted about this in a closed issue (which was dumb, sorry), so this duplicates (and clarifies on) a post I made here.
The issue is I can't change the color of the "on" state from the default orange. Using this style code on a button, I can successfully change the "off" colour,
.switch-button {
background-color: ${state === 'on' ? 'green':'red'} !important;
}
Grid card with embedded bubble cards:
State is off (first button in list correctly shows specified color):
State is on (first button in list is incorrectly orange instead of green):
The orange color it's picking up is the "accent color" in my HA config. I've also tried using the Bubble theme (which is beautiful, I'll keep it!) but it doesn't respect the "on" state either.
I'm a new user so could be making a simple mistake. One thing I am curious about is the css names of all the elements - how do I know what these are?? I suspect that I don't want to be changing the background-color but maybe some other field... but I'm not sure how to find the options.
Thanks for your work on this addition, I'm having a blast with it otherwise!
Just an update, playing with this more. If I change the button type from Switch to State I get the behavior I expect.
My short term problem is solved but I'll leave this issue open Clooos for you to evaluate if these buttons are supposed to have different behaviors. Cheers
I will take a look at this, I must have forgot something. Thank you for the feedback!
I've just tried on a switch with the custom style you've sent and this is working on my side, so I don't understand what is happening here 😅
And you have "button type" set to "switch"? I can still get this behaviour and "fix" it just by changing the type.
Maybe a more general question. Are Switch and State button types functionally the same and just have different presets for the tap action? It's not clear to me how they otherwise differ or why they're both needed. But again I'm new to this!
Again, I've found a workaround so no need to keep this open is we can't replicate! 🙂
I finally found why I wasn't able to reproduce this, I was trying with a light entity. Indeed with other entities it is not working like before.
But now it's working like this:
.bubble-button-background {
background-color: ${state === 'on' ? 'green' : 'red'} !important;
}I will change that in the documentation.
Thank you everyone for the feedback!