Dark Theme Toggle Switch

<div class="group relative hover:ring-1 ring-white/10 rounded-[50px] bg-gradient-to-b from-neutral-800 to-neutral-900 p-2.5 shadow-2xl" style="box-shadow: 0 10px 30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);">
  <input class="toggle-checkbox peer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/60 rounded-md absolute z-10 w-full h-full opacity-0 cursor-pointer" type="checkbox" aria-label="Toggle" role="switch" aria-checked="false" style="appearance: none; border-radius: inherit; font: inherit;">
  <div class="toggle-container transition-colors flex items-center relative rounded-[50px] w-20 h-10 bg-neutral-800" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 2px 8px rgba(0,0,0,0.8), inset 0 -1px 2px rgba(255,255,255,0.03); transition: all .4s ease;">
    <div class="toggle-button flex justify-center items-center absolute left-0.5 rounded-full w-9 h-9 bg-gradient-to-br from-neutral-700 to-neutral-800" style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); transition: all .4s ease;">
      <div class="toggle-button-circles-container grid grid-cols-3 gap-1 absolute" style="grid-template-columns: repeat(3, 3px);">
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle rounded-full w-1 h-1 bg-gradient-to-br from-gray-500 to-gray-600" style="width: 2.5px; height: 2.5px; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.15), inset 0 -0.5px 1px rgba(0,0,0,0.4);"></div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function () { const checkbox = document.querySelector('.toggle-checkbox'); const container = document.querySelector('.toggle-container'); const button = document.querySelector('.toggle-button'); const OFF_BG = '#171717'; const ON_BG = '#2563eb'; const OFF_LEFT = '2px'; const ON_LEFT = '42px'; function applyState() { const checked = checkbox.checked; container.style.backgroundColor = checked ? ON_BG : OFF_BG; button.style.left = checked ? ON_LEFT : OFF_LEFT; checkbox.setAttribute('aria-checked', checked ? 'true' : 'false'); } checkbox.addEventListener('change', applyState); applyState(); });
  </script>
</div>