Feat(Theme): Support switch theme mode

src/App.tsx

@@ -2,9 +2,14 @@ import { theme } from 'antd'
 import zh_CN from 'antd/locale/zh_CN'
 import BaseStyles from '@/assets/css/base.style'
 import CommonStyles from '@/assets/css/common.style'
-import { COLOR_PRODUCTION } from '@/constants/common.constants'
+import {
+    COLOR_PRODUCTION,
+    THEME_DARK,
+    THEME_FOLLOW_SYSTEM,
+    THEME_LIGHT
+} from '@/constants/common.constants'
 import { getRouter } from '@/router'
-import { init } from '@/util/common'
+import { getThemeMode, init } from '@/util/common'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 export const AppContext = createContext({
@@ -17,19 +22,38 @@ const App = () => {
     const [notificationInstance, notificationHolder] = notification.useNotification()
     const [modalInstance, modalHolder] = AntdModal.useModal()
     const [routerState, setRouterState] = useState(getRouter)
-    const [isDarkMode, setIsDarkMode] = useState(false)
+    const [themeMode, setThemeMode] = useState(getThemeMode())
+    const [isSystemDarkMode, setIsSystemDarkMode] = useState(false)
+
+    const getIsDark = () => {
+        switch (themeMode) {
+            case THEME_FOLLOW_SYSTEM:
+                return isSystemDarkMode
+            case THEME_LIGHT:
+                return false
+            case THEME_DARK:
+                return true
+        }
+    }
 
     useEffect(() => {
         init(messageInstance, notificationInstance, modalInstance)
+
         const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-        setIsDarkMode(darkThemeMq.matches)
-        const listener = (ev: MediaQueryListEvent) => {
-            setIsDarkMode(ev.matches)
+        setIsSystemDarkMode(darkThemeMq.matches)
+        const darkThemeMqChangeListener = (ev: MediaQueryListEvent) => {
+            setIsSystemDarkMode(ev.matches)
         }
-        darkThemeMq.addEventListener('change', listener)
+        darkThemeMq.addEventListener('change', darkThemeMqChangeListener)
+
+        const themeModeChangeListener = () => {
+            setThemeMode(getThemeMode())
+        }
+        window.addEventListener('localStorageChange', themeModeChangeListener)
 
         return () => {
-            darkThemeMq.removeEventListener('change', listener)
+            darkThemeMq.removeEventListener('change', darkThemeMqChangeListener)
+            window.removeEventListener('localStorageChange', themeModeChangeListener)
         }
     }, [])
 
@@ -37,7 +61,7 @@ const App = () => {
         <AntdConfigProvider
             theme={{
                 cssVar: true,
-                algorithm: isDarkMode ? theme.darkAlgorithm : undefined,
+                algorithm: getIsDark() ? theme.darkAlgorithm : theme.defaultAlgorithm,
                 token: {
                     colorPrimary: COLOR_PRODUCTION,
                     colorLinkHover: COLOR_PRODUCTION
@@ -57,7 +81,7 @@ const App = () => {
                     refreshRouter: () => {
                         setRouterState(getRouter())
                     },
-                    isDarkMode
+                    isDarkMode: getIsDark()
                 }}
             >
                 <Suspense fallback={<FullscreenLoadingMask />}>