主要观点总结
文章介绍了使用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()改变图像灰度，实现网页整体变灰色的效果。
文章预览
前言 换肤功能是一项普遍的需求，尤其是在夜晚，用户更倾向于使用暗黑模式。在我负责的公司项目中，每个项目都有换肤功能的需求。 过去，我主要使用 SCSS 变量，并利用其提供的函数，如 @each 、 map-get 来实现换肤功能。但因其使用成本高，只能适用于SCSS项目，于是后来我改用 CSS 变量来实现换肤。这样无论是基于 LESS 的 React 项目，还是基于 SCSS 的 Vue 项目，都能应用换肤功能。并且使用时只需调用 var 函数，降低了使用成本。 Demo地址： https://github.com/cwjbjy/vite-vue-ts-seed/tree/feature/css 1. 一键换肤 1. 前置知识 CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值 --fontColor: '#fff' Var函数：用 于使用CSS变量。第一个参数为CSS变量名称，第二个可选参数作为默认值 co
………………………………
