perf: ⚡️ localstorage 记录主题

pages/_app.tsx

@@ -1,12 +1,13 @@
 import { MyLayout } from "@/components/Layout";
-import { RecoilRoot, useRecoilValue } from "recoil";
+import { RecoilRoot, useRecoilState } from "recoil";
 import zhCN from "antd/locale/zh_CN";
 import "antd/dist/reset.css";
 import "@/styles/global.css";
 import { ConfigProvider, theme } from "antd";
-import { themeState } from "@/store";
+import { ThemeMode, themeState } from "@/store";
 import Head from "next/head";
 import Pkg from "@/package.json";
+import { useEffect } from "react";
 
 export default function MyApp(props) {
   return (
@@ -17,7 +18,13 @@ export default function MyApp(props) {
 }
 
 const Container = ({ Component, pageProps }) => {
-  const themeMode = useRecoilValue(themeState);
+  const [themeMode, setThemeMode] = useRecoilState(themeState);
+
+  // 初始化 store
+  useEffect(() => {
+    const localMode = localStorage.getItem("use-local-mode") as ThemeMode;
+    setThemeMode(localMode || "light");
+  }, [setThemeMode]);
 
   return (
     <>

store/index.ts

@@ -42,9 +42,16 @@ export const rightBasicState = atom({
 // layout content ref
 export const LayoutContentRefContext = createContext({ current: null });
 
-type Theme = "light" | "dark";
 // 主题
+export type ThemeMode = "light" | "dark";
 export const themeState = atom({
   key: "themeState",
-  default: "light" as Theme,
+  default: "light" as ThemeMode,
+  effects_UNSTABLE: [
+    ({ onSet }) => {
+      onSet((val) => {
+        localStorage.setItem("use-local-mode", val);
+      });
+    },
+  ],
 });