<div class="dx-viewport demo-container">
        <div class="form">
            <div class="dx-fieldset">
                <div class="dx-field">
                    <div class="dx-field-label">Switched on</div>
                    <div class="dx-field-value">
                        <div id="switch-on"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Switched off</div>
                    <div class="dx-field-value">
                        <div id="switch-off"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Value change handling</div>
                    <div class="dx-field-value">
                        <div id="handler-switch"></div>
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">Disabled</div>
                    <div class="dx-field-value">
                        <div id="disabled"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
        
    </div>
.dx-switch-handle:before {
  background-color: red;  
}

.dx-switch-on-value .dx-switch-handle:before {
 background-color: red;   
}

.dx-switch-container {
  border-color: lime;
}
DevExpress.viz.currentTheme("generic.light");
$(function(){
    $("#switch-on").dxSwitch({
        value: true
    });
    
    $("#switch-off").dxSwitch({
        value: false
    });
    
    $("#handler-switch").dxSwitch({
        onValueChanged: function(data) {
            disabledSwitch.option("value", data.value);
        }
    });
    
    var disabledSwitch = $("#disabled").dxSwitch({
        value: false,
        disabled: true
    }).dxSwitch("instance");
});
Run Pen

External CSS

  1. https://cdn3.devexpress.com/jslib/17.1.6/css/dx.spa.css
  2. https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css
  3. https://cdn3.devexpress.com/jslib/17.1.6/css/dx.light.css

External JavaScript

  1. https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/js/jquery-3.1.0.min.js
  2. https://cdn3.devexpress.com/jslib/17.1.6/js/dx.all.js