fix: fix ssr bug

Author: li-jia-nan

packages/hooks/src/useTheme/index.ts

@@ -1,42 +1,47 @@
-import { useEffect, useState } from 'react';
-import useMemoizedFn from '../useMemoizedFn';
+import { useEffect, useState } from "react";
+import useMemoizedFn from "../useMemoizedFn";
+import isBrowser from "../utils/isBrowser";
 
 export enum ThemeMode {
-  LIGHT = 'light',
-  DARK = 'dark',
-  SYSTEM = 'system',
+  LIGHT = "light",
+  DARK = "dark",
+  SYSTEM = "system",
 }
 
 export type ThemeModeType = `${ThemeMode}`;
 
-export type ThemeType = 'light' | 'dark';
+export type ThemeType = "light" | "dark";
 
-const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
-
-function useCurrentTheme() {
+const 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(() => {
-    const onThemeChange: MediaQueryList['onchange'] = (event) => {
+    const onThemeChange: MediaQueryList["onchange"] = (event) => {
       if (event.matches) {
         setTheme(ThemeMode.DARK);
       } else {
         setTheme(ThemeMode.LIGHT);
       }
     };
 
-    matchMedia.addEventListener('change', onThemeChange);
+    matchMedia?.addEventListener("change", onThemeChange);
 
     return () => {
-      matchMedia.removeEventListener('change', onThemeChange);
+      matchMedia?.removeEventListener("change", onThemeChange);
     };
   }, []);
 
   return theme;
-}
+};
 
 type Options = {
   localStorageKey?: string;
@@ -47,7 +52,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;
   });