feat(docs): update

docs/.vitepress/theme/index.ts

@@ -1,19 +1,21 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
+// import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import Layout from "./layout.vue"
 
 export default {
   extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
-  },
+  // Layout: () => {
+  //   return h(DefaultTheme.Layout, null, {
+  //     // https://vitepress.dev/guide/extending-default-theme#layout-slots
+  //   })
+  // },
+  Layout,
   enhanceApp() {
     try {
-      let langs = ['en-US', 'zh-CN']
+      const langs = ['en-US', 'zh-CN']
       let lang = navigator.language
       if (!langs.includes(lang)) {
         lang = langs[0]

docs/.vitepress/theme/layout.vue

@@ -0,0 +1,67 @@
+<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)`
+    ]
+
+    // @ts-ignore
+    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>