chore: view transition dark

.vitepress/config.js

@@ -6,7 +6,6 @@ import { nav } from './nav.js';
 import PanguPlugin from 'markdown-it-pangu'
 import { fileURLToPath, URL } from 'node:url'
 import VueMacros from 'unplugin-vue-macros/vite'
-import Vue from '@vitejs/plugin-vue'
 
 const customElements = [
   'mjx-container',
@@ -144,6 +143,7 @@ export default withMermaid({
     externalLinkIcon: true,
   },
   markdown: {
+    lineNumbers: true,
     config: (md) => {
       md.use(mathjax3);
       md.use(PanguPlugin);
@@ -166,12 +166,6 @@ export default withMermaid({
     ],
     resolve: {
       alias: [
-        {
-          find: /^.*\/VPSwitchAppearance\.vue$/,
-          replacement: fileURLToPath(
-            new URL('./components/CustomSwitchAppearance.vue', import.meta.url)
-          )
-        },
         {
           find: /^.*\/NotFound\.vue$/,
           replacement: fileURLToPath(

.vitepress/theme/Layout.vue

@@ -0,0 +1,70 @@
+<script setup>
+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 }) => {
+  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.js

@@ -2,6 +2,7 @@
 import { h, watch } from 'vue'
 // import Theme from 'vitepress/theme'
 import DefaultTheme from 'vitepress/theme-without-fonts'
+import Layout from './Layout.vue'
 import Download from '../../components/Download.vue'
 import Bilibili from '../../components/Bilibili.vue'
 import Parallax from '../../components/Parallax.vue'
@@ -12,10 +13,7 @@ let homePageStyle = undefined
 
 export default {
   ...DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-    })
-  },
+  Layout: Layout,
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('Download', Download)