Day / night toggle

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/interactive/toggle-day-night.html
  Desc   : Sun ⇄ moon scene toggle driven by a hidden checkbox — zero JS
  ============================================================
-->
<div class="sg-toggle-day-night" style="--sg-day:#8ECDF2; --sg-night:#2B3060; --sg-size:150px; --sg-duration:0.6s;">
  <input type="checkbox" id="sg-toggle-day-night-cb" class="sg-toggle-day-night-cb" />
  <label for="sg-toggle-day-night-cb" class="sg-toggle-day-night-pill" aria-label="Switch between day and night">
    <svg viewBox="0 0 120 60" aria-hidden="true" focusable="false">
      <rect class="sg-toggle-day-night-sky" x="0" y="0" width="120" height="60" rx="30" />
      <g class="sg-toggle-day-night-stars">
        <circle cx="34" cy="18" r="1.6" />
        <circle cx="52" cy="36" r="1.1" />
        <circle cx="68" cy="14" r="1.4" />
        <circle cx="84" cy="30" r="1.2" />
      </g>
      <g class="sg-toggle-day-night-sun">
        <circle cx="30" cy="30" r="13" />
        <line x1="30" y1="9"  x2="30" y2="13" />
        <line x1="30" y1="47" x2="30" y2="51" />
        <line x1="9"  y1="30" x2="13" y2="30" />
        <line x1="47" y1="30" x2="51" y2="30" />
      </g>
      <g class="sg-toggle-day-night-moon">
        <circle cx="90" cy="30" r="12" />
        <circle class="sg-toggle-day-night-crater" cx="86" cy="26" r="2.6" />
        <circle class="sg-toggle-day-night-crater" cx="94" cy="33" r="1.8" />
      </g>
    </svg>
  </label>
</div>
<style>
  .sg-toggle-day-night {
    width: var(--sg-size);
    display: inline-block;
  }
  .sg-toggle-day-night-cb {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  .sg-toggle-day-night-pill {
    display: block;
    cursor: pointer;
    border-radius: 999px;
  }
  .sg-toggle-day-night-pill svg {
    display: block;
    width: 100%;
    border-radius: 999px;
  }
  .sg-toggle-day-night-sky {
    fill: var(--sg-day);
    transition: fill var(--sg-duration) ease;
  }
  .sg-toggle-day-night-sun,
  .sg-toggle-day-night-moon {
    transition: transform var(--sg-duration) cubic-bezier(0.4, 0, 0.2, 1.2);
  }
  .sg-toggle-day-night-sun circle { fill: #f6c945; }
  .sg-toggle-day-night-sun line {
    stroke: #f6c945;
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  .sg-toggle-day-night-moon { transform: translateY(42px); }
  .sg-toggle-day-night-moon circle { fill: #e8ecf6; }
  .sg-toggle-day-night-moon .sg-toggle-day-night-crater { fill: rgba(90, 100, 140, 0.35); }
  .sg-toggle-day-night-stars circle {
    fill: #ffffff;
    opacity: 0;
    transition: opacity calc(var(--sg-duration) * 0.6) ease;
  }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-sky { fill: var(--sg-night); }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-sun { transform: translateY(42px); }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-moon { transform: translateY(0); }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle { opacity: 1; }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle:nth-of-type(2) { transition-delay: calc(var(--sg-duration) * 0.3); }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle:nth-of-type(3) { transition-delay: calc(var(--sg-duration) * 0.5); }
  .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle:nth-of-type(4) { transition-delay: calc(var(--sg-duration) * 0.7); }
  .sg-toggle-day-night-cb:focus-visible ~ .sg-toggle-day-night-pill {
    outline: 2px solid var(--sg-day);
    outline-offset: 3px;
  }
</style>