feat(主题): 添加settingTheme字段以增强主题切换功能
在ThemeProvider中添加settingTheme字段,用于在Sidebar组件中显示当前主题状态。这样用户可以更直观地了解当前主题设置
This commit is contained in:
parent
6699b0902f
commit
8ac18934e9
@ -35,7 +35,7 @@ const Sidebar: FC = () => {
|
|||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const { sidebarIcons } = useSettings()
|
const { sidebarIcons } = useSettings()
|
||||||
const { theme, toggleTheme } = useTheme()
|
const { theme, settingTheme, toggleTheme } = useTheme()
|
||||||
const { pinned } = useMinapps()
|
const { pinned } = useMinapps()
|
||||||
|
|
||||||
const onEditUser = () => UserPopup.show()
|
const onEditUser = () => UserPopup.show()
|
||||||
@ -87,7 +87,10 @@ const Sidebar: FC = () => {
|
|||||||
<QuestionCircleOutlined />
|
<QuestionCircleOutlined />
|
||||||
</Icon>
|
</Icon>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.8} placement="right">
|
<Tooltip
|
||||||
|
title={t('settings.theme.title') + ': ' + t(`settings.theme.${settingTheme}`)}
|
||||||
|
mouseEnterDelay={0.8}
|
||||||
|
placement="right">
|
||||||
<Icon theme={theme} onClick={() => toggleTheme()}>
|
<Icon theme={theme} onClick={() => toggleTheme()}>
|
||||||
{theme === 'dark' ? (
|
{theme === 'dark' ? (
|
||||||
<i className="iconfont icon-theme icon-dark1" />
|
<i className="iconfont icon-theme icon-dark1" />
|
||||||
|
|||||||
@ -5,11 +5,13 @@ import React, { createContext, PropsWithChildren, useContext, useEffect, useStat
|
|||||||
|
|
||||||
interface ThemeContextType {
|
interface ThemeContextType {
|
||||||
theme: ThemeMode
|
theme: ThemeMode
|
||||||
|
settingTheme: ThemeMode
|
||||||
toggleTheme: () => void
|
toggleTheme: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const ThemeContext = createContext<ThemeContextType>({
|
const ThemeContext = createContext<ThemeContextType>({
|
||||||
theme: ThemeMode.light,
|
theme: ThemeMode.light,
|
||||||
|
settingTheme: ThemeMode.light,
|
||||||
toggleTheme: () => {}
|
toggleTheme: () => {}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -55,7 +57,11 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, defaultT
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return <ThemeContext.Provider value={{ theme: _theme, toggleTheme }}>{children}</ThemeContext.Provider>
|
return (
|
||||||
|
<ThemeContext.Provider value={{ theme: _theme, settingTheme: theme, toggleTheme }}>
|
||||||
|
{children}
|
||||||
|
</ThemeContext.Provider>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useTheme = () => useContext(ThemeContext)
|
export const useTheme = () => useContext(ThemeContext)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user