From e3359be0106e9d8e14238d7f9cc15e744d605834 Mon Sep 17 00:00:00 2001
From: Alan Clarke <xalanq@gmail.com>
Date: Tue, 12 Mar 2024 11:43:54 +0800
Subject: [PATCH] feat: set mask color of image preview to be black #000 in
 dark mode (#730) (#732)

---
 .changeset/short-wolves-impress.md                  |  5 +++++
 .../src/components/MediumZoom.tsx                   | 13 ++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/short-wolves-impress.md

diff --git a/.changeset/short-wolves-impress.md b/.changeset/short-wolves-impress.md
new file mode 100644
index 000000000..ede4f0a21
--- /dev/null
+++ b/.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)
diff --git a/packages/plugin-medium-zoom/src/components/MediumZoom.tsx b/packages/plugin-medium-zoom/src/components/MediumZoom.tsx
index 6afb889e3..c9faf4d1f 100644
--- a/packages/plugin-medium-zoom/src/components/MediumZoom.tsx
+++ b/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;
 }