feat: useTheme 支持 ssr

alibaba · Dec 5, 2024 · 3002619 · 3002619
1 parent c7bb04c
commit 3002619
Show file tree

Hide file tree

Showing 2 changed files with 11,714 additions and 13,023 deletions.
diff --git a/packages/hooks/src/useTheme/index.ts b/packages/hooks/src/useTheme/index.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
+import isBrowser from '../utils/isBrowser';
 
 export enum ThemeMode {
   LIGHT = 'light',
@@ -11,12 +12,18 @@ export type ThemeModeType = `${ThemeMode}`;
 
 export type ThemeType = 'light' | 'dark';
 
-const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
 
 function useCurrentTheme() {
+  const matchMedia = isBrowser
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : undefined;
+
   const [theme, setTheme] = useState<ThemeType>(() => {
-    const init = matchMedia.matches ? ThemeMode.DARK : ThemeMode.LIGHT;
-    return init;
+    if (isBrowser) {
+      return matchMedia?.matches ? ThemeMode.DARK : ThemeMode.LIGHT;
+    } else {
+      return ThemeMode.LIGHT;
+    }
   });
 
   useEffect(() => {
@@ -28,10 +35,10 @@ function useCurrentTheme() {
       }
     };
 
-    matchMedia.addEventListener('change', onThemeChange);
+    matchMedia?.addEventListener('change', onThemeChange);
 
     return () => {
-      matchMedia.removeEventListener('change', onThemeChange);
+      matchMedia?.removeEventListener('change', onThemeChange);
     };
   }, []);
 
@@ -47,7 +54,8 @@ export default function useTheme(options: Options = {}) {
 
   const [themeMode, setThemeMode] = useState<ThemeModeType>(() => {
     const preferredThemeMode =
-      localStorageKey?.length && (localStorage.getItem(localStorageKey) as ThemeModeType | null);
+      localStorageKey?.length &&
+      (localStorage.getItem(localStorageKey) as ThemeModeType | null);
 
     return preferredThemeMode ? preferredThemeMode : ThemeMode.SYSTEM;
   });