Merge pull request #162 from y1hao/dark

feat: allow following OS system theme

src/components/App.tsx

@@ -1,9 +1,9 @@
 import { BrowserRouter, useRoutes } from 'react-router-dom';
 import routesConfig from '../config/routesConfig';
 import Navbar from './Navbar';
-import { Suspense, useMemo, useState } from 'react';
+import { Suspense, useState, useEffect } from 'react';
 import Loading from './Loading';
-import { CssBaseline, ThemeProvider } from '@mui/material';
+import { CssBaseline, Theme, ThemeProvider } from '@mui/material';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
 import { tools } from '../tools';
@@ -11,6 +11,8 @@ import './index.css';
 import { darkTheme, lightTheme } from '../config/muiConfig';
 import ScrollToTopButton from './ScrollToTopButton';
 
+export type Mode = 'dark' | 'light' | 'system';
+
 const AppRoutes = () => {
   const updatedRoutesConfig = [...routesConfig];
   tools.forEach((tool) => {
@@ -20,10 +22,26 @@ const AppRoutes = () => {
 };
 
 function App() {
-  const [darkMode, setDarkMode] = useState<boolean>(() => {
+  const [mode, setMode] = useState<Mode>(
-    return localStorage.getItem('theme') === 'dark';
+    () => (localStorage.getItem('theme') || 'system') as Mode
-  });
+  );
-  const theme = useMemo(() => (darkMode ? darkTheme : lightTheme), [darkMode]);
+  const [theme, setTheme] = useState<Theme>(() => getTheme(mode));
+  useEffect(() => setTheme(getTheme(mode)), [mode]);
+
+  // Make sure to update the theme when the mode changes
+  useEffect(() => {
+    const systemDarkModeQuery = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    );
+    const handleThemeChange = (e: MediaQueryListEvent) => {
+      setTheme(e.matches ? darkTheme : lightTheme);
+    };
+    systemDarkModeQuery.addEventListener('change', handleThemeChange);
+
+    return () => {
+      systemDarkModeQuery.removeEventListener('change', handleThemeChange);
+    };
+  }, []);
 
   return (
     <ThemeProvider theme={theme}>
@@ -38,9 +56,10 @@ function App() {
         <CustomSnackBarProvider>
           <BrowserRouter>
             <Navbar
-              onSwitchTheme={() => {
+              mode={mode}
-                setDarkMode((prevState) => !prevState);
+              onChangeMode={() => {
-                localStorage.setItem('theme', darkMode ? 'light' : 'dark');
+                setMode((prev) => nextMode(prev));
+                localStorage.setItem('theme', nextMode(mode));
               }}
             />
             <Suspense fallback={<Loading />}>
@@ -54,4 +73,21 @@ function App() {
   );
 }
 
+function getTheme(mode: Mode): Theme {
+  switch (mode) {
+    case 'dark':
+      return darkTheme;
+    case 'light':
+      return lightTheme;
+    default:
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? darkTheme
+        : lightTheme;
+  }
+}
+
+function nextMode(mode: Mode): Mode {
+  return mode === 'light' ? 'dark' : mode === 'dark' ? 'system' : 'light';
+}
+
 export default App;

src/components/Navbar/index.tsx

@@ -17,13 +17,17 @@ import {
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import { Icon } from '@iconify/react';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
+import { Mode } from 'components/App';
 
 interface NavbarProps {
-  onSwitchTheme: () => void;
+  mode: Mode;
+  onChangeMode: () => void;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ onSwitchTheme }) => {
+const Navbar: React.FC<NavbarProps> = ({
+  mode,
+  onChangeMode: onChangeMode
+}) => {
   const navigate = useNavigate();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -37,7 +41,19 @@ const Navbar: React.FC<NavbarProps> = ({ onSwitchTheme }) => {
   ];
 
   const buttons: ReactNode[] = [
-    <DarkModeIcon onClick={onSwitchTheme} style={{ cursor: 'pointer' }} />,
+    <Icon
+      key={mode}
+      onClick={onChangeMode}
+      style={{ cursor: 'pointer' }}
+      fontSize={30}
+      icon={
+        mode === 'dark'
+          ? 'ic:round-dark-mode'
+          : mode === 'light'
+            ? 'ic:round-light-mode'
+            : 'ic:round-contrast'
+      }
+    />,
     <Icon
       onClick={() => window.open('https://discord.gg/SDbbn3hT4b', '_blank')}
       style={{ cursor: 'pointer' }}