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

12
web/src/i18n/locales/en.json
View File

@@ -1984,5 +1984,15 @@
"按顺序替换content中的变量占位符": "Replace variable placeholders in content in order",
"Unix时间戳": "Unix timestamp",
"隐私设置": "Privacy settings",
"记录请求与错误日志IP": "Record request and error log IP"
"记录请求与错误日志IP": "Record request and error log IP",
"切换主题": "Switch Theme",
"浅色模式": "Light Mode",
"深色模式": "Dark Mode",
"自动模式": "Auto Mode",
"始终使用浅色主题": "Always use light theme",
"始终使用深色主题": "Always use dark theme",
"跟随系统主题设置": "Follow system theme",
"当前跟随系统": "Currently following system",
"深色": "Dark",
"浅色": "Light"
}