🚀 [dark-mode] support remove listener

shuimo-design · Nov 25, 2024 · d024fde · d024fde
1 parent a9a7d8a
commit d024fde
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/lib/components/other/darkMode/useDarkMode.ts b/lib/components/other/darkMode/useDarkMode.ts
@@ -20,20 +20,32 @@ export function useDarkMode(props: DarkModeProps) {
   // 因为rice-paper组件可能会是web-component的，所以provide和getCurrentInstance都会出问题
   const isDarkRef = ref(props.modelValue ?? getBrowserDarkMode());
 
+  let isDark = isDarkRef.value;
+
+
+  const toggleDarkModeFun = (event: MediaQueryListEvent) => {
+    isDark = toggleDarkMode({ modelValue: event.matches });
+    return isDark;
+  };
+
   const onMountedHook = () => {
-    // todo add event remove
-    let isDark = isDarkRef.value;
     if (props.autoMode) {
       if (typeof window !== 'undefined') {
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-          isDark = toggleDarkMode({ modelValue: event.matches });
-        });
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', toggleDarkModeFun);
         isDark = toggleDarkMode({ modelValue: getBrowserDarkMode() });
       }
     }
     isDarkRef.value = isDark;
   };
 
+  const unmountedHook = () => {
+    if (props.autoMode) {
+      if (typeof window !== 'undefined') {
+        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', toggleDarkModeFun);
+      }
+    }
+  };
+
   const toggleDarkMode = (props: DarkModeProps) => {
     // set or remove dark to html
     const htmlTag = document.querySelector('html');
@@ -54,6 +66,7 @@ export function useDarkMode(props: DarkModeProps) {
     getBrowserDarkMode,
     onMountedHook,
     toggleDarkMode,
+    unmountedHook,
   };
 
 }
diff --git a/lib/components/template/ricePaper/RicePaperSetup.tsx b/lib/components/template/ricePaper/RicePaperSetup.tsx
@@ -8,7 +8,7 @@
  *
  * v1.0.1 auto support dark mode
  */
-import { onBeforeUnmount, onMounted, watch } from 'vue';
+import { onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue';
 import { WCSetup } from '../../types/template';
 import { RicePaperProps } from './index';
 import useImgMove from './compositions/useImgMove.ts';
@@ -19,16 +19,22 @@ export const MRicePaperSetup: WCSetup<RicePaperProps> = slot => {
   return (props, { slots }) => {
     if (props.autoDarkMode === true || (props.autoDarkMode as unknown as string) === 'true') {
       const { darkModeRef, initDarkMode } = useDarkModeStorage();
-      const { onMountedHook } = useDarkMode({
+      const { onMountedHook, unmountedHook } = useDarkMode({
         autoMode: true,
         modelValue: darkModeRef.value,
       });
+      let needInit = true;
       onMounted(() => {
-        const needInit = initDarkMode();
+        needInit = initDarkMode();
         if (needInit) {
           onMountedHook();
         }
       });
+      onUnmounted(() => {
+        if (needInit) {
+          unmountedHook();
+        }
+      });
     }
     const {
       baseRef: mLBaseRef,