Dark Mode Toggle

<label class="tgl-dark-mode-toggle">
  <input type="checkbox" role="switch" aria-label="Dark mode">
  <span class="tgl-dark-mode-toggle-track" aria-hidden="true">
    <span class="tgl-dark-mode-toggle-knob"></span>
  </span>
  <span class="tgl-dark-mode-toggle-page" aria-hidden="true">
    <span class="tgl-dark-mode-toggle-bar"></span>
    <span class="tgl-dark-mode-toggle-line"></span>
    <span class="tgl-dark-mode-toggle-line"></span>
    <span class="tgl-dark-mode-toggle-line"></span>
  </span>
</label>

.tgl-dark-mode-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.9em;
}
.tgl-dark-mode-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-dark-mode-toggle-track {
  position: relative;
  display: block;
  width: 3.6em;
  height: 2em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 22%, #fff);
  box-shadow: inset 0 0.08em 0.2em rgba(15, 23, 42, 0.2);
  transition: background-color 0.5s ease;
}
/* the sun is a full inset shadow; the moon is the same shadow pushed off-center */
.tgl-dark-mode-toggle-knob {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.75em #f59e0b, 0 0 0.45em rgba(245, 158, 11, 0.55);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1.2), box-shadow 0.5s ease;
}
.tgl-dark-mode-toggle-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  box-sizing: border-box;
  width: 6em;
  height: 4.2em;
  padding: 0.55em 0.6em;
  border-radius: 0.55em;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 0.3em 0.8em rgba(15, 23, 42, 0.14);
}
/* night layer, revealed in a circle that grows from the switch side */
.tgl-dark-mode-toggle-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0f172a;
  clip-path: circle(0% at 0% 50%);
  transition: clip-path 0.7s cubic-bezier(0.6, 0, 0.3, 1);
}
.tgl-dark-mode-toggle-bar,
.tgl-dark-mode-toggle-line {
  position: relative;
  display: block;
  border-radius: 0.2em;
}
.tgl-dark-mode-toggle-bar {
  width: 55%;
  height: 0.55em;
  margin-bottom: 0.1em;
  background: var(--c);
}
.tgl-dark-mode-toggle-line {
  height: 0.28em;
  background: #e2e8f0;
  transition: background-color 0.3s ease 0.15s;
}
.tgl-dark-mode-toggle-line:nth-child(3) { width: 80%; }
.tgl-dark-mode-toggle-line:nth-child(4) { width: 64%; }
.tgl-dark-mode-toggle input:checked + .tgl-dark-mode-toggle-track {
  background: color-mix(in srgb, var(--c) 18%, #0f172a);
}
.tgl-dark-mode-toggle input:checked + .tgl-dark-mode-toggle-track .tgl-dark-mode-toggle-knob {
  transform: translateX(1.6em) rotate(-20deg);
  box-shadow: inset 0.45em -0.28em 0 0 #e2e8f0, 0 0 0.45em rgba(226, 232, 240, 0);
}
.tgl-dark-mode-toggle input:checked ~ .tgl-dark-mode-toggle-page { border-color: rgba(255, 255, 255, 0.14); }
.tgl-dark-mode-toggle input:checked ~ .tgl-dark-mode-toggle-page::before { clip-path: circle(150% at 0% 50%); }
.tgl-dark-mode-toggle input:checked ~ .tgl-dark-mode-toggle-page .tgl-dark-mode-toggle-line { background: #334155; }
.tgl-dark-mode-toggle input:focus-visible + .tgl-dark-mode-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
/* to theme a real page: :root:has(#theme-toggle:checked) { --bg: #0f172a; --text: #e2e8f0; } */

@media (prefers-reduced-motion: reduce) {
  .tgl-dark-mode-toggle, .tgl-dark-mode-toggle *, .tgl-dark-mode-toggle::before, .tgl-dark-mode-toggle::after, .tgl-dark-mode-toggle *::before, .tgl-dark-mode-toggle *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

The same effect using Tailwind utility classes. No custom CSS or config needed.

<label class="group relative inline-flex cursor-pointer items-center gap-4">
  <input type="checkbox" role="switch" aria-label="Dark mode" class="peer sr-only">
  <span aria-hidden="true" class="relative block h-8 w-14 rounded-full bg-blue-100 shadow-inner transition-colors duration-500 after:absolute after:left-1 after:top-1 after:h-6 after:w-6 after:rounded-full after:shadow-[inset_0_0_0_0.75rem_#f59e0b] after:transition-all after:duration-500 after:content-[''] peer-checked:bg-slate-800 peer-checked:after:translate-x-6 peer-checked:after:-rotate-[20deg] peer-checked:after:shadow-[inset_0.45rem_-0.28rem_0_0_#e2e8f0] peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-500"></span>
  <span aria-hidden="true" class="relative flex h-16 w-24 flex-col gap-1.5 overflow-hidden rounded-lg border border-slate-900/10 bg-white p-2 shadow-lg before:absolute before:inset-0 before:bg-slate-900 before:transition-[clip-path] before:duration-700 before:content-[''] before:[clip-path:circle(0%_at_0%_50%)] peer-checked:border-white/15 peer-checked:before:[clip-path:circle(150%_at_0%_50%)]">
    <span class="relative mb-0.5 h-2 w-1/2 rounded bg-blue-500"></span>
    <span class="relative h-1 rounded bg-slate-200 transition-colors delay-150 group-has-[:checked]:bg-slate-700"></span>
    <span class="relative h-1 w-4/5 rounded bg-slate-200 transition-colors delay-150 group-has-[:checked]:bg-slate-700"></span>
    <span class="relative h-1 w-2/3 rounded bg-slate-200 transition-colors delay-150 group-has-[:checked]:bg-slate-700"></span>
  </span>
</label>

Similar toggle switches