スムーズなライトモードとダークモードの移行: トークン、CSS、モーション

/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }

body { background: var(--surface); color: var(--text); }

// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
  const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!document.startViewTransition || reduce) return apply();
  document.startViewTransition(apply);
}