Semantic-ui-react: Toggle checkbox color [feature request]

[kirillku]

Is it possible to add color prop to <Checkbox toggle />?
Right now it's with !important and it's not even possible to change color without changing semantic.css.

.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before {
  background-color: #2185D0 !important
}
.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
  background-color: #0d71bb !important
}

[layershifter]

If it will be done in SUI, we will impliment it. SUIR doesn't deal with CSS at all, it only generates the valid markup.

[farhansalam]

this works in SUIR

.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
    background-color: teal !important
}

.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
    background-color: grey;
}

[lisandelacruz]

@farhansalam solution is great but when the Toggle loses focus, it changes to the default blue color, you also need to add:

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: #YOUR_CUSTOM_COLOR !important;
}

[brad-harper]

What about the foreground color, i.e. the color of the box's check mark?

As described, this works

.ui.checkbox input:checked~.box:before, 
.ui.checkbox input:checked~label:before {
    background-color: red !important;
}

I'd expect that color: red !important; would affect the check mark ... but it has no effect.

[crewow]

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.red:before {
background: #F25F5C !important;
}

and call it like this

        <div class="field">
            <div class="ui toggle checkbox">
                <input type="checkbox" name="checboxname" id="checboxname" value="any">
                <label class="coloring red">any label</label>
            </div>
        </div>