How to customize bootstrap switch color

Question

How can I customize bootstrap switch color to the desired color?

I found a oncolor and offcolor but not know how to change them.

Answer 1

According to this page every option is also a method. So you can apply onColor and OffColor like that:

$("#sw").bootstrapSwitch({onColor: 'danger'});

or like that:

$("#sw").bootstrapSwitch();
...
$("#sw").bootstrapSwitch('onColor', 'danger');

or to override the default options of the library:

$.fn.bootstrapSwitch.defaults.onColor = 'danger';

To use your own colors you need to create your own CSS class. For example, this class uses 'retroorange' name with your color:

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-retroorange,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-retroorange {
  color: #fff;
  background: #ff9933;
}

Then you can use 'retroorange' in the usual way like that:

$("#sw").bootstrapSwitch({onColor: 'retroorange'});