Semantic React UI : is there a way to change the background color of a checkbox toggle?

Question

I'm using toggle checkboxes by Semantic React UI. The background color of a checkbox is defined in their styles here :

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

... But I would like to be able to set a prop that would change that color, like

<Checkbox toggle toggleColor="red"/>

Could I extend that component to achieve that, or is there another way to achieve this ?

Thanks !

Answer 1

Yes you can, but it is not pretty!

I have a solution that works with semantic-ui and is heavily tested. I assume that it also works with semantic-ui-react but did not test extensively.

First, a color feature for checkboxes is missing from semantic-ui (as far as I can see, there is no documentation about it at least). So you need to use CSS to define your colors. All your colors! So if you have a lot you might to want SASS or something. Also you might want to make a feature request with semantic-ui.

Second, my solution uses the label of the checkbox to color the checkbox. I am fully aware that this is not pretty but this is apparently the only way to do this without too much additional code or even more ugly methods.

Add this to your code (please note, stackoverflow does not render this example properly since the <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css">is obviously missing. If there is a way to add this on this side please let me know.)

.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
    background: #000000 !important;
}

.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
    background: #FFFFFF !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

<div class="ui segment">
  <div class="ui attached icon form" id="info_input_form">
    <div class="ui toggle checkbox">
      <input type="checkbox" tabindex="0">
      <label class="coloring black">Toggle</label>
    </div>
  </div>
</div>