Animated Dark-Mode Toggle

<div class="th-demo" id="thDemo">
  <button class="th" id="th" aria-label="Toggle theme">
    <span class="th-track"><span class="th-knob"><svg class="sun" viewBox="0 0 24 24" width="14" height="14"><circle cx="12" cy="12" r="4.5" fill="#ff9500"/><g stroke="#ff9500" stroke-width="1.6" stroke-linecap="round"><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></g></svg><svg class="moon" viewBox="0 0 24 24" width="14" height="14"><path d="M16 12a6 6 0 01-7.5 5.8A7 7 0 1018 7.5 6 6 0 0116 12z" fill="#ffd60a"/></svg></span></span>
  </button>
  <p class="th-label" id="thLabel">Light mode</p>
</div>

*{box-sizing:border-box}
.th-demo{display:grid;place-items:center;gap:16px;padding:40px 30px;border-radius:18px;background:#f4f6fb;transition:background .4s;font-family:system-ui,sans-serif}
.th-demo.dark{background:#11151f}
.th{border:0;background:0;cursor:pointer;padding:0}
.th-track{display:block;width:68px;height:34px;border-radius:999px;background:#cfd6e4;position:relative;transition:background .4s}
.th-demo.dark .th-track{background:#2a3142}
.th-knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:left .35s cubic-bezier(.5,0,.2,1);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.th-demo.dark .th-knob{left:37px;background:#1a2030}
.th-knob .moon{display:none}
.th-demo.dark .th-knob .sun{display:none}
.th-demo.dark .th-knob .moon{display:block}
.th-label{margin:0;font-weight:600;color:#46506b;transition:color .4s}
.th-demo.dark .th-label{color:#c8d0e0}

var demo=document.getElementById('thDemo'),label=document.getElementById('thLabel');
document.getElementById('th').onclick=function(){var dark=demo.classList.toggle('dark');label.textContent=dark?'Dark mode':'Light mode'};