2 种纯前端换肤方案

主要观点总结

文章介绍了使用CSS变量实现一键换肤功能的方法，包括定义主题色、修改CSS主题色和JS主题色的步骤，以及一键变灰的功能。

关键观点总结

关键观点1: 使用CSS变量实现一键换肤

通过定义不同的主题色CSS变量，在html标签上增加自定义属性来选择不同的主题，实现一键换肤功能。

关键观点2: 修改CSS主题色的方法

通过监听change事件，使用document.documentElement.setAttribute动态修改data-theme属性，CSS属性选择器将自动选择对应的css变量。

关键观点3: 修改JS主题色的方法

除了在CSS中修改样式，有时需要在JS文件中修改样式，例如修改echarts的配置文件，来改变图形的颜色。可以通过定义主题色TS类型，规定默认和暗黑两种，定义theme响应式变量，使用watch进行监听，重新绘制echarts图形。

关键观点4: 一键变灰的功能

在特殊的日子，可以通过CSS的filter属性，使用grayscale()改变图像灰度，实现网页整体变灰色的效果。

免责声明