fix: theme

package.json

@@ -51,11 +51,11 @@
     "sort-array": "^4.1.5",
     "ua-parser-js": "^1.0.33",
     "use-system-theme": "^0.1.1",
-    "vite-plugin-svgr": "^2.4.0",
     "yup": "^0.32.11",
     "yup-locales": "^1.2.10"
   },
   "devDependencies": {
+    "vite-plugin-svgr": "^2.4.0",
     "@peculiar/webcrypto": "^1.4.1",
     "@types/crypto-js": "^4.1.1",
     "@types/date-fns": "^2.6.0",

src/App.tsx

@@ -3,11 +3,11 @@ import {SnackbarProvider} from "notistack"
 import React, {ReactElement} from "react"
 
 import {QueryClientProvider} from "@tanstack/react-query"
-import {CssBaseline, ThemeProvider} from "@mui/material"
+import {CssBaseline, Theme, ThemeProvider} from "@mui/material"
 
 import {queryClient} from "~/constants/react-query"
 import {getServerSettings} from "~/apis"
-import {lightTheme} from "~/constants/themes"
+import {darkTheme, lightTheme} from "~/constants/themes"
 import AdminRoute from "~/routes/AdminRoute"
 import AliasDetailRoute from "~/routes/AliasDetailRoute"
 import AliasesRoute from "~/routes/AliasesRoute"
@@ -30,6 +30,7 @@ import RootRoute from "~/routes/Root"
 import SettingsRoute from "~/routes/SettingsRoute"
 import SignupRoute from "~/routes/SignupRoute"
 import VerifyEmailRoute from "~/routes/VerifyEmailRoute"
+import useSystemTheme, {SystemTheme} from "use-system-theme"
 import "./init-i18n"
 
 const router = createBrowserRouter([
@@ -134,11 +135,18 @@ const router = createBrowserRouter([
 	},
 ])
 
+const THEME_THEME_MAP: Record<SystemTheme, Theme> = {
+	light: lightTheme,
+	dark: darkTheme,
+}
+
 export default function App(): ReactElement {
+	const theme = useSystemTheme()
+
 	return (
 		<React.StrictMode>
 			<QueryClientProvider client={queryClient}>
-				<ThemeProvider theme={lightTheme}>
+				<ThemeProvider theme={THEME_THEME_MAP[theme]}>
 					<SnackbarProvider>
 						<CssBaseline />
 						<RouterProvider router={router} />

src/constants/themes.ts

@@ -1,6 +1,8 @@
 import {createTheme} from "@mui/material"
 
-export const lightTheme = createTheme({
+export const lightTheme = createTheme()
+
+export const darkTheme = createTheme({
 	palette: {
 		mode: "dark",
 		secondary: {