Sun to Moon

<button class="nuda-icon-sunmoon" type="button" aria-label="Switch to dark theme" aria-pressed="false">
  <svg class="nuda-icon-sunmoon__svg" viewBox="0 0 24 24" aria-hidden="true">
    <mask id="icon-sunmoon-mask">
      <rect x="0" y="0" width="24" height="24" fill="white" />
      <circle class="nuda-icon-sunmoon__cut" cx="24" cy="10" r="6" fill="black" />
    </mask>
    <circle class="nuda-icon-sunmoon__core" cx="12" cy="12" r="6" mask="url(#icon-sunmoon-mask)" />
    <g class="nuda-icon-sunmoon__rays">
      <line x1="12" y1="1"  x2="12" y2="3" />
      <line x1="12" y1="21" x2="12" y2="23" />
      <line x1="1"  y1="12" x2="3"  y2="12" />
      <line x1="21" y1="12" x2="23" y2="12" />
      <line x1="4.2"  y1="4.2"  x2="5.6"  y2="5.6" />
      <line x1="18.4" y1="18.4" x2="19.8" y2="19.8" />
      <line x1="4.2"  y1="19.8" x2="5.6"  y2="18.4" />
      <line x1="18.4" y1="5.6"  x2="19.8" y2="4.2" />
    </g>
  </svg>
</button>

/* Sun to Moon
   Rays retract while a masked circle slides over the core to crescent it.
   GPU-only: transform + opacity. Customize: --icon-accent */

.nuda-icon-sunmoon {
  --icon-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.4s;
}

.nuda-icon-sunmoon:hover,
.nuda-icon-sunmoon:focus-visible {
  border-color: rgba(228, 255, 84, 0.4);
  outline: none;
}

.nuda-icon-sunmoon:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.5);
}

.nuda-icon-sunmoon[aria-pressed="true"] {
  color: var(--icon-accent);
  transform: rotate(40deg);
}

.nuda-icon-sunmoon__svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.nuda-icon-sunmoon__core {
  fill: currentColor;
  stroke: none;
  transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center;
  will-change: transform;
}

.nuda-icon-sunmoon__cut {
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.nuda-icon-sunmoon__rays {
  transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1), opacity 0.3s;
  transform-origin: center;
  will-change: transform, opacity;
}

.nuda-icon-sunmoon[aria-pressed="true"] .nuda-icon-sunmoon__core {
  transform: scale(1.4);
}

.nuda-icon-sunmoon[aria-pressed="true"] .nuda-icon-sunmoon__cut {
  transform: translate(-10px, 2px);
}

.nuda-icon-sunmoon[aria-pressed="true"] .nuda-icon-sunmoon__rays {
  opacity: 0;
  transform: scale(0.4) rotate(40deg);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-icon-sunmoon,
  .nuda-icon-sunmoon__core,
  .nuda-icon-sunmoon__cut,
  .nuda-icon-sunmoon__rays { transition: none; }
}

/* Sun to Moon — vanilla JS
   Flips aria-pressed/label and (optionally) the page theme. */

(function () {
  document.querySelectorAll(".nuda-icon-sunmoon").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var dark = btn.getAttribute("aria-pressed") !== "true";
      btn.setAttribute("aria-pressed", String(dark));
      btn.setAttribute("aria-label", dark ? "Switch to light theme" : "Switch to dark theme");
      document.documentElement.classList.toggle("dark", dark);
    });
  });
})();