Basic
Custom Colors
You can easily make your own switch color by creating a custom CSS class. Take a look at the example below where we add a switch red color.
<div class="switch red"> <label> Off <input type="checkbox" checked> <span class="lever"></span> On </label></div>.switch.red { /* Overwriting default style of .red */ background: transparent !important;}.switch.red label input[type=checkbox]:checked+.lever { /* #e57373 red lighten-2 */ background-color: #e57373;}.switch.red label input[type=checkbox]:checked+.lever:after { /* #f44336 red */ background-color: #f44336;}.switch.red label .lever:before,.switch.red input[type=checkbox]:checked:not(:disabled)~.lever:active::before,.switch.red input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever::before { /* #ffcdd2 red lighten-4 */ background-color: #ffcdd2;}