diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 90db4b6..7ad386f 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,6 +1,36 @@
 import DefaultTheme from 'vitepress/theme'
+import mediumZoom from 'medium-zoom'
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+
 import './style/print.css'
+import './style/zoom.css'
 
 export default {
   ...DefaultTheme,
-}
+
+  setup() {
+    const route = useRoute()
+
+    const initZoom = () => {
+      mediumZoom('.main img', {
+        background: 'rgba(0,0,0,0.8)'
+      })
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        initZoom()
+      })
+    })
+
+    watch(
+      () => route.path,
+      () => {
+        nextTick(() => {
+          initZoom()
+        })
+      }
+    )
+  }
+}
\ No newline at end of file