Skip to main content

主题切换 ThemeDown

ThemeDown 是一个简洁的主题切换组件，提供“亮色模式”和“暗色模式”的快速切换，使用 Redux 管理状态，并通过图标直观展示当前主题状态。

📦 引入方式​

import { ThemeDown } from '@npmqg/react-ui-core';

🧩 使用示例​

import { ThemeDown } from '@npmqg/react-ui-core';

import { useGlobalStore } from '@/store';

const theme = useGlobalStore((state) => state.theme);
const setState = useGlobalStore((state) => state.setState);

<ThemeDown setState={setState} theme={theme} />;

🧩 Props​

功能描述
切换主题点击按钮后，在 'dark' 和 'light' 模式之间切换
图标提示显示太阳 ☀️ 表示亮色模式，月亮 🌙 表示暗色模式
UI 组件使用 Toggle 组件作为开关，提供清晰交互反馈

🧩 使用场景​

  • 顶部导航栏或设置面板
  • 支持用户手动切换夜间/白天模式
  • 配合系统样式主题变量，自动切换界面风格

🔧 主题切换实现建议​

配合 Tailwind CSS 或 CSS 变量主题切换方案：

useEffect(() => {
  document.documentElement.setAttribute('data-theme', theme);
}, [theme]);