CSS主题切换方案说明

最近给项目做了主题切换，这篇帖子是为方便我自己做记录用的，有些细节没写那么清晰，里面有不明白的点可以私信或评论

思路

先定义好主题库,然后通过js切换css跟节点来更换主题

技术细节

1. 初始化
首次进入或浏览器刷新时，将记录的主题状态赋值到body和js逻辑
1.通过body控制全局样式
2.js主要控制logo图片切换，矢量图切换，图表canvas主题切换及初始化处理

2. 存储

1. vuex：
   优点：可以和vue高度融合进行双向绑定赋值
   缺点：不能实现浏览器存储

2. localstorage：
   优点：可以实现浏览器存储，只要不清缓存就不会清除掉
   缺点：赋值需要通过事件主动传值
   结论：通过两者融合，可以同时满足两者优点，既能实现浏览器存储又能双向绑定
   问题：
   以上处理方式是本地存储的方案，
   如果通过识别登录用户来切换主题，
   则需在登陆后获取用户基本信息的主题标志。
   初始化或切换主题时也应将当前主题对象标志存储到数据库的对应用户信息下

3. 图片、矢量图及图表处理
   1.图片：后期更换品牌可能要换logo或首屏展示图片，采取更换的方式，把img标签引入方式改为在css中改变 background-img的方式作为div背景展示，这样可以根据不同的主题库加载不同的图片
   2.矢量图：图标一般不需要更换图片样式，只更换颜色，但是png、jpg等图片格式不能任意切换颜色，只能换图片，代价会很大，所以图标、切图全局改为svg矢量图，svg为canvas绘制，可通过变量随意改变场景颜色风格
   3.图表：开源图表如e-charts等由canvas绘制封装，初始化前需要将预制参数赋值，所以通过预先封装好的存储器传主题标志或颜色码

4. 样式库封装
   由于主题样式库是自定义的轻量级样式库，所以需要人工检索加入不同组件的样式块

思考：由于开发需求的不同和增加，后面可能会用到之前没有用到的常规组件，这时就需要手动从主题库手动增加对应组件的主题样式块，通过antUI库自带的主题库结合less变量方式可以规避这一点，所以后续如果发现经常会出现此类问题，需要将现有主题切换形式和antUI库自带的主题库结合，以实现常规UI组件主题的全面覆盖

5. 动态配置或导入样式库
   动态导入样式库需要 动态生成指定格式的样式库文件
   实现流程：下载样式库模板-配置样式库模板-导入-识别文本流-生成less文件至theme文件夹-增加主题选项卡或配置项
   1.出于安全考虑，浏览器环境原生API不支持动态写入文件。
   2.webpack运行在node环境可以通过fs组件写入，但也是在手动运行node命令的前提下。
   但是打包后前端代码仍然要部署到浏览器环境，所以也不能实现动态写入。
   3.通过与后端沟通，java可以实现文件写入，这样我们可以通过接口传参实现动态写入，但是否时我们想要的结果有待实践。

弊端：通过模板配置css样式库也需要前端人员配置，因为运营人员并不懂代码，支持动态配置需要花费比较大量的人员投入和时间成本（需要后端配合联调文件生成功能），所以这个功能按目前的方案看比较鸡肋，不如直接在项目代码中配置调试更方便。

---

优点

1. 轻量化: 无冗余代码库,可读性高
2. 速度快: 切换时无编译过程,直接通过改变css跟节点来切换主题
3. 定制化: 代码可读性高功能配置灵活,可根据项目需要任意扩展定制化需求

缺点

1. 局限性: 必须提前定义好主题库,不能使用颜色卡选择任意颜色
2. 开发成本偏高: 需要收集需要改变主题的样式块(根据实际开发经验来看,这个代价并不大,因为切换主题需要统一改变的色块是有限的、统一的)