前端实现主题色切换

276 阅读1分钟

一、实现思路:通过CSS变量+类名切换实现主题色切换

二、具体步骤

1.在style/theme新建需求中需要的几套主题css样式,给出的例子有四套(default,red,gree,purple)

image.png

设置根元素的 theme-mode='主题名称',将页面中的颜色用css变量表示 image.png

2.通过window.document.documentElement.setAttribute("theme-mode", theme);设置不同的主题

将默认主题存储在状态机和本地

image.png

初始化默认主题,点击按钮切换主题,将新的主题存储在状态机和本地

image.png

image.png

效果展示: 默认主题:

image.png

绿色主题:

image.png

红色主题:

image.png