1// It's a DOM Update and a progressive enhancement!
2const toggleTheme = () => {
3  const isDark = themeToggle.matches("[aria-pressed=true]") ? false : true
4  themeToggle.setAttribute("aria-pressed", isDark)
5  document.documentElement.dataset.theme = isDark ? "dark" : "light"
6}
7const handleTheming = () => {
8  if (!document.startViewTransition) toggleTheme()
9  document.startViewTransition(toggleTheme)
10}
11themeToggle.addEventListener("click", handleTheming)

1::view-transition-new(root) {
2  animation: reveal 1s;
3  clip-path: inset(0 0 0 0);
4}
5::view-transition-old(root) {
6  animation: none;
7}
8[data-theme="dark"] { --from: 0 0 100% 0; }
9[data-theme="light"] { --from: 100% 0 0 0; }
10@keyframes reveal {
11  from { clip-path: inset(var(--from)); }
12}