deliteful-Switch-custom-appearance

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<div class="panel">
    <p>
        <label id="wf">Wi-Fi
            <d-switch id="sw1" checked="true"></d-switch>
        </label>
    </p>
    <p>
        <label id="bt">Bluetooth
            <d-switch id="sw2" checkedLabel="ENABLED" uncheckedLabel="DISABLED"></d-switch>
        </label>
    </p>
</div>

CSS

body {
    font-family: sans-serif;
}
p {
    line-height: 2.2em;
}
.d-switch {
    margin-left: 3px;
    margin-right: 3px;
    float: right;
}
#wf .d-switch-width {
    width: 50px;
}
#wf .d-switch-leading {
    background-color: #5bc0de;
}
#bt .d-switch-width {
    width: 130px;
}
#bt .d-switch-leading {
    font-weight: normal;
}
#bt .d-switch-trailing {
    font-weight: normal;
    background-color: #333333;
    color: #eeeeee;
}
.panel {
    flex-direction: column;
    display: flex;
}

JavaScript

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master"
});

require(["deliteful-build/layer"], function () {
    require([
        "deliteful/Switch"], function () {
        document.body.style.display = "";
    });
});