View Transitions API Dark Mode — Circular Reveal

<div class="page" id="page">
  <header>
    <span class="logo">Acme</span>
    <button class="toggle-btn" id="toggleBtn" aria-label="Toggle dark mode">
      <svg id="sunMoon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.2" y1="4.2" x2="5.6" y2="5.6"></line>
        <line x1="18.4" y1="18.4" x2="19.8" y2="19.8"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.2" y1="19.8" x2="5.6" y2="18.4"></line>
        <line x1="18.4" y1="5.6" x2="19.8" y2="4.2"></line>
      </svg>
    </button>
  </header>

  <main>
    <h1>Native circular reveal</h1>
    <p>Click the sun/moon button. In Chromium browsers (Chrome, Edge, Opera) this uses <code>document.startViewTransition</code> to wipe the new theme in as an expanding circle from the button. Everywhere else it falls back to an instant, still-smooth class toggle.</p>
    <div class="cards">
      <div class="card">Card A</div>
      <div class="card">Card B</div>
      <div class="card">Card C</div>
    </div>
  </main>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: system-ui, sans-serif; }

.page {
  min-height: 100vh; background: #f8fafc; color: #0f172a;
  transition: background 0.2s, color 0.2s;
}
.page.dark { background: #0f172a; color: #e2e8f0; }

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px; border-bottom: 1px solid rgba(148,163,184,0.25);
}
.logo { font-weight: 800; font-size: 16px; }

.toggle-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(148,163,184,0.4);
  background: transparent; color: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, transform 0.15s;
}
.toggle-btn:hover { border-color: #6366f1; }
.toggle-btn:active { transform: scale(0.92); }

main { max-width: 480px; margin: 0 auto; padding: 48px 24px; }
h1 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
p { font-size: 14px; line-height: 1.7; opacity: 0.8; margin-bottom: 24px; }
code { background: rgba(148,163,184,0.2); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

.cards { display: grid; gap: 12px; }
.card {
  padding: 18px; border-radius: 12px; font-weight: 700; font-size: 13.5px;
  background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.25);
}

/* --- View Transitions API circular reveal --- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

.dark-transition::view-transition-new(root) {
  animation: circle-reveal 0.55s ease-in forwards;
}
.light-transition::view-transition-new(root) {
  animation: circle-reveal 0.55s ease-in forwards;
}

@keyframes circle-reveal {
  from { clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }
  to   { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
}

const page = document.getElementById('page');
const btn = document.getElementById('toggleBtn');

function applyTheme(isDark) {
  page.classList.toggle('dark', isDark);
}

btn.addEventListener('click', (e) => {
  const goingDark = !page.classList.contains('dark');
  const rect = btn.getBoundingClientRect();
  const x = rect.left + rect.width / 2;
  const y = rect.top + rect.height / 2;

  // Feature-detect the native View Transitions API. It currently ships in
  // Chromium-based browsers (Chrome, Edge, Opera); Firefox and Safari do
  // not yet support document.startViewTransition, so those browsers fall
  // straight to the plain, still-animated class toggle below.
  if (!document.startViewTransition) {
    applyTheme(goingDark);
    return;
  }

  document.documentElement.style.setProperty('--x', x + 'px');
  document.documentElement.style.setProperty('--y', y + 'px');
  document.documentElement.classList.add(goingDark ? 'dark-transition' : 'light-transition');

  const transition = document.startViewTransition(() => {
    applyTheme(goingDark);
  });

  transition.finished.finally(() => {
    document.documentElement.classList.remove('dark-transition', 'light-transition');
  });
});