<div class="text-center">
  <div id="theme-toggle" class="relative inline-block m-8" data-state="auto">
    <div class="relative z-10 flex items-center h-4">
      <label class="w-16 h-6 pr-4 relative flex items-center justify-end" />
      <input value="light" name="state-d" type="radio" class="opacity-0 absolute block w-full h-full inset-0 cursor-pointer" /> <span class="transition-opacity uppercase opacity-50 cursor-pointer">Light</span>
      </label>
      <label class="w-6 h-6 relative">
        <input value="auto" name="state-d" type="radio" checked class="opacity-0 absolute block w-full h-full inset-0 cursor-pointer" /> <span class="absolute block text-xs font-bold -top-4 left-1/2 transform -translate-x-1/2 uppercase opacity-50 transition-opacity cursor-pointer">Auto</span>
      </label>
      <label class="w-16 h-6 pl-4 relative flex items-center">
        <input value="dark" name="state-d" type="radio" class="opacity-0 absolute block w-full h-full inset-0 cursor-pointer" /> <span class="uppercase opacity-50 transition-opacity cursor-pointer">Dark</span>
      </label>
    </div>
    <div class="absolute top-0 left-1/2 transform -translate-x-1/2">
      <div class="track w-12 h-4 bg-gray-600 rounded-full shadow-inner"></div>
      <div class="thumb transition-all duration-300 ease-in-out absolute top-0 left-4 w-4 h-4  bg-white border-2 border-gray-800 rounded-full">
      </div>
    </div>

  </div>
</div>
/*  Global Colors */
:root,
.light {
  --bg-body: #f1fae4;
  --text-body: #212a3c;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-body: #f1fae4;
    --text-body: #212a3c;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: #12262f;
    --text-body: #e5f3ed;
  }
}

.dark {
  --bg-body: #12262f;
  --text-body: #e5f3ed;
}

body {
  background: var(--bg-body);
  color: var(--text-body);
}

/* Toggle State CSS */

#theme-toggle input:checked ~ span {
  opacity: 1;
}
.light #theme-toggle .thumb {
  left: 0;
}
.dark #theme-toggle .thumb {
  left: 2rem;
}
document.addEventListener("DOMContentLoaded", function () {
  darkmode();
});

function darkmode() {
  // Grab state from localStorage
  const storedMode = window.localStorage.getItem("darkmode");

  // setState based on stored mode or set to auto
  if (storedMode) {
    $(`#theme-toggle input[value='${storedMode}']`).checked = true;
    setState(storedMode);
  } else setState("auto");

  function setState(state) {
    document.body.classList.remove("light", "dark");
    if (state !== "auto") document.body.classList.add(state);
    window.localStorage.setItem("darkmode", state);
  }

  $$("#theme-toggle input").forEach((t) => {
    t.addEventListener("click", (e) => {
      if (t.checked) {
        setState(t.value);
      }
    });
  });
}

/*!
 * Get the first matching element in the DOM
 * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String} selector The element selector
 * @param  {Node}   parent   The parent to search in [optional]
 * @return {Node}            The element
 */
var $ = function (selector, parent) {
  return (parent ? parent : document).querySelector(selector);
};

/*!
 * Get an array of all matching elements in the DOM
 * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String} selector The element selector
 * @param  {Node}   parent   The parent to search in [optional]
 * @return {Array}           Th elements
 */
var $$ = function (selector, parent) {
  return Array.prototype.slice.call(
    (parent ? parent : document).querySelectorAll(selector)
  );
};

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.