Theme Swipe

<div class="nuda-vt-theme">
  <div class="nuda-vt-theme__panel" data-theme="dark">
    <span class="nuda-vt-theme__label">Theme</span>
  </div>
  <button type="button" class="nuda-vt-theme__btn">Switch theme</button>
</div>

/* Theme Swipe
   Circular reveal theme switch. The new snapshot is clipped from a 0%-radius
   circle outward, so the incoming theme "wipes" over the old one.
   Customize: clip origin (50% 50%), final radius, animation-duration */

.nuda-vt-theme__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 110px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  view-transition-name: vt-theme-panel;
}

.nuda-vt-theme__panel[data-theme="dark"]  { background: #09090b; }
.nuda-vt-theme__panel[data-theme="dark"] .nuda-vt-theme__label  { color: #e4ff54; }
.nuda-vt-theme__panel[data-theme="light"] { background: #e4ff54; }
.nuda-vt-theme__panel[data-theme="light"] .nuda-vt-theme__label { color: #09090b; }

.nuda-vt-theme__label { font-weight: 700; }

.nuda-vt-theme__btn {
  background: #e4ff54;
  color: #09090b;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.nuda-vt-theme__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@keyframes vt-theme-reveal {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}

/* Hold the old snapshot still; reveal the new one with a growing circle. */
::view-transition-old(vt-theme-panel) { animation: none; }
::view-transition-new(vt-theme-panel) {
  animation: vt-theme-reveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(vt-theme-panel) { animation: none; }
}

/* Theme Swipe — vanilla JS
   Toggles the theme inside a view transition for the circular reveal.
   Tip: read the click coordinates to center the circle on the cursor. */

(function () {
  document.querySelectorAll(".nuda-vt-theme").forEach(function (root) {
    var panel = root.querySelector(".nuda-vt-theme__panel");
    var btn = root.querySelector(".nuda-vt-theme__btn");

    function doSwap() {
      panel.dataset.theme = panel.dataset.theme === "dark" ? "light" : "dark";
    }

    btn.addEventListener("click", function () {
      if (!document.startViewTransition) { doSwap(); return; }
      document.startViewTransition(doSwap);
    });
  });
})();