oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🌓 feat(ui): add auto theme mode, refactor ThemeToggle, optimize header theme handling

Browse Source 
- Feature: Introduce 'auto' theme mode
  - Detect system preference via matchMedia('(prefers-color-scheme: dark)')
  - Add useActualTheme context to expose the effective theme ('light'|'dark')
  - Persist selected mode in localStorage ('theme-mode') with 'auto' as default
  - Apply/remove `dark` class on <html> and sync `theme-mode` on <body>
  - Broadcast effective theme to iframes

- UI: Redesign ThemeToggle with Dropdown items and custom highlight
  - Replace non-existent IconMonitor with IconRefresh
  - Use Dropdown.Menu + Dropdown.Item with built-in icon prop
  - Selected state uses custom background highlight; hover state preserved
  - Remove checkmark; selection relies on background styling
  - Current button icon reflects selected mode

- Performance: reduce re-renders and unnecessary effects
  - Memoize theme options and current button icon (useMemo)
  - Simplify handleThemeToggle to accept only explicit modes ('light'|'dark'|'auto')
  - Minimize useEffect dependencies; remove unrelated deps

- Header: streamline useHeaderBar
  - Use useActualTheme for iframe theme messaging
  - Remove unused statusDispatch
  - Remove isNewYear from theme effect dependencies

- Home: send effective theme (useActualTheme) to external content iframes

- i18n: add/enhance theme-related copy in locales (en/zh)

- Chore: minor code cleanup and consistency
  - Improve readability and maintainability
  - Lint clean; no functional regressions
This commit is contained in:
t0ng7u
2025-08-23 03:02:35 +08:00
parent 08add538a0
commit 61ae19ac82
7 changed files with 173 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
web/src/context/Theme/index.jsx
View File

@@ -17,39 +17,90 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { createContext, useCallback, useContext, useState } from 'react';
import { createContext, useCallback, useContext, useState, useEffect } from 'react';
const ThemeContext = createContext(null);
export const useTheme = () => useContext(ThemeContext);
const ActualThemeContext = createContext(null);
export const useActualTheme = () => useContext(ActualThemeContext);
const SetThemeContext = createContext(null);
export const useSetTheme = () => useContext(SetThemeContext);
// 检测系统主题偏好
const getSystemTheme = () => {
if (typeof window !== 'undefined' && window.matchMedia) {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
return 'light';
};
export const ThemeProvider = ({ children }) => {
const [theme, _setTheme] = useState(() => {
try {
return localStorage.getItem('theme-mode') || null;
return localStorage.getItem('theme-mode') || 'auto';
} catch {
return null;
return 'auto';
}
});
const setTheme = useCallback((input) => {
_setTheme(input ? 'dark' : 'light');
const [systemTheme, setSystemTheme] = useState(getSystemTheme());
const body = document.body;
if (!input) {
body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light');
} else {
body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark');
// 计算实际应用的主题
const actualTheme = theme === 'auto' ? systemTheme : theme;
// 监听系统主题变化
useEffect(() => {
if (typeof window !== 'undefined' && window.matchMedia) {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleSystemThemeChange = (e) => {
setSystemTheme(e.matches ? 'dark' : 'light');
};
mediaQuery.addEventListener('change', handleSystemThemeChange);
return () => {
mediaQuery.removeEventListener('change', handleSystemThemeChange);
};
}
}, []);
// 应用主题到DOM
useEffect(() => {
const body = document.body;
if (actualTheme === 'dark') {
body.setAttribute('theme-mode', 'dark');
document.documentElement.classList.add('dark');
} else {
body.removeAttribute('theme-mode');
document.documentElement.classList.remove('dark');
}
}, [actualTheme]);
const setTheme = useCallback((newTheme) => {
let themeValue;
if (typeof newTheme === 'boolean') {
// 向后兼容原有的 boolean 参数
themeValue = newTheme ? 'dark' : 'light';
} else if (typeof newTheme === 'string') {
// 新的字符串参数支持 'light', 'dark', 'auto'
themeValue = newTheme;
} else {
themeValue = 'auto';
}
_setTheme(themeValue);
localStorage.setItem('theme-mode', themeValue);
}, []);
return (
<SetThemeContext.Provider value={setTheme}>
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
<ActualThemeContext.Provider value={actualTheme}>
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
</ActualThemeContext.Provider>
</SetThemeContext.Provider>
);
};