<div class="panel p-3 panel-default">
  <div class="panel-body">
    <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="themeSwitch">
  <label class="custom-control-label" for="themeSwitch">Enable dark mode</label>
</div>
  </div>
</div>



/* Default css for light theme */
body {
  background-color: white;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all linear 1s;
}
.panel {
  background-color: lightblue;
}
label{
  color:#0d47a1;
}
/* Custom css for dark theme */
[data-theme=dark-theme] {
  background-color:gray ;
}
[data-theme=dark-theme] .panel {
  background-color: darkgray;
}
[data-theme=dark-theme] label {
  color: rgb(245,245,245);
}

$("#themeSwitch").on("change", function() {
  if (this.checked) {
    $("body").attr("data-theme","dark-theme")
  } else {
       $("body").attr("data-theme","")

  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.