feat(主题): 添加settingTheme字段以增强主题切换功能

在ThemeProvider中添加settingTheme字段,用于在Sidebar组件中显示当前主题状态。这样用户可以更直观地了解当前主题设置
This commit is contained in:
hobee 2025-03-25 02:19:02 +08:00 committed by 亢奋猫
parent 6699b0902f
commit 8ac18934e9
2 changed files with 12 additions and 3 deletions

View File

@ -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" />

View File

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