git 仓库地址：https://gitee.com/xiaoli-account/vue3_ts.git

## 主题色彩css的统一规范

• 新建主题切换用到的css文件，单独管理
• 将会使用到的主题风格颜色，进行统一提取管理，统一使用
• 如：字体颜色、背景颜色、边线颜色、各个伪类颜色
• 集成element plus的主题切换功能，在使用组件库样式时，也可以满足主题切换element plus 主题文档

## 使用store实现主题切换，页面样式覆盖

• 使用store为了全局缓存当前主题色，便于页面初始化时的主题选择
• 通过原生js方法替换页面内使用到的变量，色值，如下：
• const root = document.documentElement; root.style.setProperty("--theme-primary", theme.primary); root.setAttribute("data-theme", mode);
• 关于element plus的主题色集成，可通过js的增加/移除样式类，来实现。如：root.classList.add("dark");root.classList.remove("dark");

## 为切换主题触发点，提供切换函数，实现切换

• 通过引入store内的主题切换函数，实现主题切换触发
• 切换的原理为，实现初始化主题函数，当handleThemeToggle切换时获取缓存的主题key,然后初始化主题，以实现以上功能
• 当前项目主题切换触发点为src/views/login/index.vue页面，如有兴趣可详细查看。