feat: support dark mode

src/pages/_layout.tsx

@@ -1,5 +1,14 @@
+import { useMemo } from "react";
 import { Route, Routes } from "react-router-dom";
-import { List, Paper, Typography } from "@mui/material";
+import { useRecoilValue } from "recoil";
+import {
+  createTheme,
+  List,
+  Paper,
+  ThemeProvider,
+  Typography,
+} from "@mui/material";
+import { atomPaletteMode } from "../states/setting";
 import LogPage from "../pages/log";
 import HomePage from "../pages/home";
 import ProxyPage from "../pages/proxy";
@@ -10,6 +19,8 @@ import ListItemLink from "../components/list-item-link";
 import Traffic from "../components/traffic";
 
 const Layout = () => {
+  const paletteMode = useRecoilValue(atomPaletteMode);
+
   const routers = [
     {
       label: "代理",
@@ -33,41 +44,61 @@ const Layout = () => {
     },
   ];
 
+  const theme = useMemo(() => {
+    const bgcolor = paletteMode === "light" ? "#f5f5f5" : "#000";
+    document.documentElement.style.background = bgcolor;
+
+    return createTheme({
+      palette: {
+        mode: paletteMode,
+        primary: {
+          main: "#5b5c9d",
+        },
+        text: {
+          primary: "#637381",
+          secondary: "#909399",
+        },
+      },
+    });
+  }, [paletteMode]);
+
   return (
-    <Paper square elevation={0} className="layout">
-      <div className="layout__sidebar">
-        <Typography
-          variant="h3"
-          component="h1"
-          sx={{ my: 2, px: 2, textAlign: "center", userSelect: "none" }}
-        >
-          Clash Verge
-        </Typography>
+    <ThemeProvider theme={theme}>
+      <Paper square elevation={0} className="layout">
+        <div className="layout__sidebar">
+          <Typography
+            variant="h3"
+            component="h1"
+            sx={{ my: 2, px: 2, textAlign: "center", userSelect: "none" }}
+          >
+            Clash Verge
+          </Typography>
 
-        <List sx={{ userSelect: "none" }}>
-          {routers.map((router) => (
-            <ListItemLink key={router.label} to={router.link}>
-              {router.label}
-            </ListItemLink>
-          ))}
-        </List>
+          <List sx={{ userSelect: "none" }}>
+            {routers.map((router) => (
+              <ListItemLink key={router.label} to={router.link}>
+                {router.label}
+              </ListItemLink>
+            ))}
+          </List>
 
-        <div className="layout__traffic">
-          <Traffic />
+          <div className="layout__traffic">
+            <Traffic />
+          </div>
         </div>
-      </div>
 
-      <div className="layout__content">
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/proxy" element={<ProxyPage />} />
-          <Route path="/profiles" element={<ProfilesPage />} />
-          <Route path="/log" element={<LogPage />} />
-          <Route path="/connections" element={<ConnectionsPage />} />
-          <Route path="/setting" element={<SettingPage />} />
-        </Routes>
-      </div>
-    </Paper>
+        <div className="layout__content">
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/proxy" element={<ProxyPage />} />
+            <Route path="/profiles" element={<ProfilesPage />} />
+            <Route path="/log" element={<LogPage />} />
+            <Route path="/connections" element={<ConnectionsPage />} />
+            <Route path="/setting" element={<SettingPage />} />
+          </Routes>
+        </div>
+      </Paper>
+    </ThemeProvider>
   );
 };