How to change a color of toggle widget?

[yhwan]

Hi

A default color of toggle widget is red.

like this..

I tried to change it, but I couldn't do it.

I referenced here. https://codepen.io/Bradley_Lancaster/pen/jPzEbz

If it is possible, please give me an idea.

Thanks.

[mneumann · Accepted solution]

Hi,

the toggle has basically two properties.

I've assigned the "ToggleMe" class to the Toggle Widget to control it's background color and the font color. The style sheet like this:

.ToggleMe {
  color: #2379FF;
  background-color: transparent;
}

For the actual background you can use

.toggle.toggle-assertive input:checked + .track {
    border-color: green;
    background-color: green;
}

Despite it's being a bit too green, it works quite nice.

One controls the actual track color, the other the border around the Widget.

(It will be for ALL Toggle Widgets you're using though)

I hope that helps

Cheers

/Michael