feat: add view transition on appearance switch

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,72 @@
+<!-- .vitepress/theme/Layout.vue -->
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+const { isDark } = useData()
+
+const enableTransitions = () =>
+    'startViewTransition' in document &&
+    window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+    if (!enableTransitions()) {
+        isDark.value = !isDark.value
+        return
+    }
+
+    const clipPath = [
+        `circle(0px at ${x}px ${y}px)`,
+        `circle(${Math.hypot(
+            Math.max(x, innerWidth - x),
+            Math.max(y, innerHeight - y)
+        )}px at ${x}px ${y}px)`
+    ]
+
+    await document.startViewTransition(async () => {
+        isDark.value = !isDark.value
+        await nextTick()
+    }).ready
+
+    document.documentElement.animate(
+        { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+        {
+            duration: 300,
+            easing: 'ease-in',
+            pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+        }
+    )
+})
+</script>
+
+<template>
+    <DefaultTheme.Layout />
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+    z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+    z-index: 9999;
+}
+
+.VPSwitchAppearance {
+    width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+    transform: none !important;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -4,9 +4,11 @@ import "virtual:uno.css";
 import "./style.css";
 import type { EnhanceAppContext } from "vitepress";
 import Theme from "vitepress/theme";
+import Layout from "./Layout.vue";
 
 export default {
 	extends: Theme,
+	Layout,
 	enhanceApp({ app }: EnhanceAppContext) {
 		app.use(TwoslashFloatingVue);
 	},