主题切换演示

完整的 Light / Dark / System 三模式主题切换方案，支持持久化保存和系统自动跟随

快速切换

一键切换三种主题模式，无需刷新页面

即时生效 无闪烁

持久化保存

用户偏好自动保存到本地存储

LocalStorage 自动恢复

系统跟随

System 模式自动检测系统主题变化

matchMedia 实时监听

组件样式示例

按钮

表单

状态标签

成功 信息 警告 错误

使用方法

// 初始化主题管理器
const themeManager = new ThemeManager();

// 设置主题 (light/dark/system)
themeManager.setTheme('dark');

// 获取当前主题
const current = themeManager.getTheme();

// 切换主题
themeManager.toggleTheme();