[Studio] Add global ThemeContext and useTheme hook for unified dark mode management

[zhaohai666]

[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

[zhaohai666]

#435