From 61ae19ac828c60c55f1353f968c96bb9aa8c69f6 Mon Sep 17 00:00:00 2001 From: t0ng7u Date: Sat, 23 Aug 2025 03:02:35 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=93=20feat(ui):=20add=20auto=20theme?= =?UTF-8?q?=20mode,=20refactor=20ThemeToggle,=20optimize=20header=20theme?= =?UTF-8?q?=20handling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 and sync `theme-mode` on - 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 --- .../layout/HeaderBar/LanguageSelector.jsx | 4 +- .../layout/HeaderBar/NotificationButton.jsx | 4 +- .../layout/HeaderBar/ThemeToggle.jsx | 90 ++++++++++++++++--- web/src/context/Theme/index.jsx | 77 +++++++++++++--- web/src/hooks/common/useHeaderBar.js | 26 +++--- web/src/i18n/locales/en.json | 12 ++- web/src/pages/Home/index.jsx | 7 +- 7 files changed, 173 insertions(+), 47 deletions(-) diff --git a/web/src/components/layout/HeaderBar/LanguageSelector.jsx b/web/src/components/layout/HeaderBar/LanguageSelector.jsx index 1f5e0bb7..68bdcb01 100644 --- a/web/src/components/layout/HeaderBar/LanguageSelector.jsx +++ b/web/src/components/layout/HeaderBar/LanguageSelector.jsx @@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com import React from 'react'; import { Button, Dropdown } from '@douyinfe/semi-ui'; -import { IconLanguage } from '@douyinfe/semi-icons'; +import { Languages } from 'lucide-react'; import { CN, GB } from 'country-flag-icons/react/3x2'; const LanguageSelector = ({ currentLang, onLanguageChange, t }) => { @@ -46,7 +46,7 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => { } >