Feat(Theme): Support switch theme mode

src/util/browser.ts

@@ -48,6 +48,7 @@ export const removeCookie = (name: string) => {
 
 export const setLocalStorage = (name: string, value: string) => {
     localStorage.setItem(name, value)
+    window.dispatchEvent(new Event('localStorageChange'))
 }
 
 export const getLocalStorage = (name: string) => {

src/util/common.tsx

@@ -1,12 +1,21 @@
 import { createRoot } from 'react-dom/client'
 import { floor } from 'lodash'
-import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants'
+import {
+    STORAGE_COLLAPSE_SIDEBAR_KEY,
+    STORAGE_THEME_MODE_KEY,
+    STORAGE_TOOL_MENU_ITEM_KEY,
+    THEME_DARK,
+    THEME_FOLLOW_SYSTEM,
+    THEME_LIGHT
+} from '@/constants/common.constants'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import { MessageInstance } from 'antd/es/message/interface'
 import { NotificationInstance } from 'antd/es/notification/interface'
 import { HookAPI } from 'antd/es/modal/useModal'
 
+export type ThemeMode = typeof THEME_FOLLOW_SYSTEM | typeof THEME_LIGHT | typeof THEME_DARK
+
 let message: MessageInstance
 let notification: NotificationInstance
 let modal: HookAPI
@@ -212,3 +221,24 @@ export const omitTextByByte = (text: string, length: number) => {
     }
     return `${substringByByte(text, 0, length)}...`
 }
+
+export const getSidebarCollapse = () => getLocalStorage(STORAGE_COLLAPSE_SIDEBAR_KEY) === 'true'
+
+export const setSidebarCollapse = (isCollapse: boolean) => {
+    setLocalStorage(STORAGE_COLLAPSE_SIDEBAR_KEY, isCollapse ? 'true' : 'false')
+}
+
+export const getThemeMode = (): ThemeMode => {
+    switch (getLocalStorage(STORAGE_THEME_MODE_KEY)) {
+        case THEME_FOLLOW_SYSTEM:
+        case THEME_LIGHT:
+        case THEME_DARK:
+            return getLocalStorage(STORAGE_THEME_MODE_KEY) as ThemeMode
+        default:
+            return THEME_FOLLOW_SYSTEM
+    }
+}
+
+export const setThemeMode = (themeMode: ThemeMode) => {
+    setLocalStorage(STORAGE_THEME_MODE_KEY, themeMode)
+}