Switch paper-toggle-button to mwc-switch

[iantrich]

Closes #3352

Could use some help with this one. When checked the toggle is styled with --mdc-theme-secondary which we already have set to accent color.

[bramkragten]

Check ha-checkbox, we override the variable so for that element —mdc-theme-secondary is primary-color

[iantrich]

Of course! I'll make a ha-switch. Thanks.

[bramkragten]

Why does mwc-switch have a slot and mwc-checkbox not 😕

[balloob]

File a bug with mwc!

[iantrich]

Not able to figure out how to style the switch when it is unchecked. Anyone mind checking here: https://deploy-preview-3683--home-assistant-demo.netlify.com/

[bramkragten]

I checked the styling for mwc and all I can say is that it is a nightmare... They compile SASS with vars and functions, so it is hardcoded in their css, so a lot of styling can't be done with css vars... So we would have to create our own css if we want to use mwc and themes.

[iantrich]

Thanks @bramkragten that looks to work well

[gerardo15]

@iantrich Just tested it on my setup! works great.