Implement #69

.vitepress/theme/index.ts

@@ -1,7 +1,8 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
+import { h, nextTick, onMounted, watch } from 'vue'
+import { useRoute, type Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import mediumZoom from 'medium-zoom';
 import './style.css'
 
 export default {
@@ -13,5 +14,18 @@ export default {
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-  }
+  },
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
 } satisfies Theme

.vitepress/theme/style.css

@@ -78,6 +78,14 @@
   background-color: var(--vp-c-bg-alt);
 }
 
+.medium-zoom-overlay {
+  z-index: 10000;
+}
+
+.medium-zoom-image {
+  z-index: 10001;
+}
+
 .VPNavBar:not(.top):not(.has-sidebar) {
   border-bottom: none !important;
   animation: nav-box-shadow 200ms ease-out forwards;

package.json

@@ -9,6 +9,7 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
+    "medium-zoom": "^1.1.0",
     "vitepress": "1.0.0-rc.31"
   }
 }