Feat(Theme): Support switch theme mode

This commit is contained in:
2024-10-23 18:53:21 +08:00
parent dc1c052f69
commit 3eebb33aa6
13 changed files with 230 additions and 142 deletions

View File

@@ -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)
}