zhaohai666 opened a new issue, #436: URL: https://github.com/apache/rocketmq-dashboard/issues/436
[Feature] Centralize Dark Mode Management with ThemeContext & useTheme Hook Issue Overview Type: Feature Enhancement Priority: Medium Module: Studio Frontend / UI Theme System Background Currently, dark mode state is implemented via scattered local useState inside MainLayout. This local state implementation brings multiple limitations: - Dark mode state cannot be shared and reused across global components - Redundant Ant Design ConfigProvider theme logic exists in layout layer - Floating components such as modals cannot correctly inherit dark mode styles, causing UI style inconsistency - Inconsistent state management architecture compared with the existing LangContext internationalization solution To unify UI theme management, standardize state logic, and achieve global dark mode consistency, a centralized theme context system is required. Expected Goals - Build a global ThemeContext based on React Context to serve as the single source of truth for theme state - Provide a unified useTheme hook, consistent with theuseLang i18n hook design pattern - Support persistent storage of user theme preferences and system color scheme fallback - Take over global Ant Design theme switching to ensure full-application style consistency - Remove redundant local dark mode state and repeated theme configuration logic Core Functional Requirements 1. Theme Context & Hook Capability Expose three core capabilities via useTheme hook: - darkMode: Read-only dark mode status - setDarkMode: Manually set theme status - toggleTheme: Quick switch theme method 2. Intelligent Theme Initialization & Persistence - Load user custom theme preference from localStorage (key: rocketmq-studio-theme) - Automatically fallback to system prefers-color-scheme when no local configuration exists - Automatically persist changes to localStorage after each theme switch 3. Global Theme Takeover - Promote ThemeProvider to the root application entry to cover all business components - Unify Ant Design darkAlgorithm / defaultAlgorithm switching logic at the global level - Solve the problem that independent modals and floating components cannot adapt to dark mode Architecture Design Specification - Adopt React Context instead of Redux/Zustand: consistent with the existing LangContext architecture, lightweight UI state is more suitable for Context management - Decouple theme state from layout components to avoid single-component state binding limitations - Ensure zero intrusion and compatibility with existing business logic Acceptance Criteria - useTheme hook works normally and can be used globally in the project - Dark mode switching takes effect for the entire application, including all modals and floating components - Theme configuration can be persisted correctly after page refresh - First-time access correctly follows the system default color scheme - Remove invalid local useState dark mode logic in MainLayout - No UI style regression in light/dark mode - Consistent overall architecture with the project's internationalization context solution -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
