<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>



/* CSS variable for light theme */
body {
  --backgroundColor: white;
  --panelBackgroundColor: lightblue;
  --labelColor: #0d47a1;
}
/* CSS variable for dark theme */
body[data-theme="dark-theme"] {
  --backgroundColor: gray;
  --panelBackgroundColor: darkgray;
  --labelColor: rgb(245, 245, 245);
}

body {
  background-color: var(--backgroundColor);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all linear 1s;
}
.panel {
  background-color: var(--panelBackgroundColor);
}
label {
  color: var(--labelColor);
}

$("#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.