feat: set mask color of image preview to be black #000 in dark mode (w…

…eb-infra-dev#730)

.changeset/short-wolves-impress.md

@@ -0,0 +1,5 @@
+---
+"@rspress/plugin-medium-zoom": patch
+---
+
+feat: set mask color of image preview to be black #000 in dark mode (#730)

packages/plugin-medium-zoom/src/components/MediumZoom.tsx

@@ -1,5 +1,5 @@
 import { useLocation } from '@rspress/runtime';
-import mediumZoom, { ZoomOptions } from 'medium-zoom';
+import mediumZoom, { Zoom, ZoomOptions } from 'medium-zoom';
 import { useEffect } from 'react';
 import './MediumZoom.css';
 
@@ -13,10 +13,17 @@ export default function MediumZoom(props: Props) {
   const { selector = '.rspress-doc img', options = {} } = props;
 
   useEffect(() => {
-    setTimeout(() => {
+    let zoom: Zoom | undefined;
+    const timeout = setTimeout(() => {
       const images = document.querySelectorAll(selector);
-      mediumZoom(images, options);
+      zoom = mediumZoom(images, { ...options, background: 'var(--rp-c-bg)' });
     }, 100);
+    return () => {
+      clearTimeout(timeout);
+      zoom?.detach();
+      zoom?.close();
+    };
   }, [pathname]);
+
   return null;
 }