feat: add theme switch animation.

.vitepress/theme/Layout.vue

@@ -0,0 +1,70 @@
+<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>

.vitepress/theme/index.ts

@@ -1,19 +1,19 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue';
 import type { Theme } from 'vitepress';
-import DefaultTheme from 'vitepress/theme';
+// import DefaultTheme from 'vitepress/theme';
 import { useData } from 'vitepress';
 import ImageModel from '../../src/components/imgmodel.vue';
 import './style.css';
 import 'uno.css';
 import VueGtag, { pageview } from 'vue-gtag';
+import DefaultTheme from './Layout.vue';
 
 export default {
-  extends: DefaultTheme,
   Layout: () => {
     const { lang } = useData();
     return [
-      h(DefaultTheme.Layout, null, {
+      h(DefaultTheme, null, {
         // https://vitepress.dev/guide/extending-default-theme#layout-slots
       }),
       h(ImageModel),

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@iconify/json": "^2.2.137",
+    "@types/dom-view-transitions": "^1.0.4",
     "@types/node": "^20.8.10",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vueuse/core": "^10.6.1",