一、实现思路:通过CSS变量+类名切换实现主题色切换
二、具体步骤
1.在style/theme新建需求中需要的几套主题css样式,给出的例子有四套(default,red,gree,purple)
设置根元素的 theme-mode='主题名称',将页面中的颜色用css变量表示
2.通过window.document.documentElement.setAttribute("theme-mode", theme);设置不同的主题
将默认主题存储在状态机和本地
初始化默认主题,点击按钮切换主题,将新的主题存储在状态机和本地
效果展示: 默认主题:
绿色主题:
红色主题: