换肤相关技术换肤技术: 1. 传统换肤技术 2. 基于反差色的换肤技术 3. 跟随系统的换肤技术 4. 基于css变量的

看这篇文章前，你应该了解:

css变量

@media(prefers-color-scheme: dark) {}

1. 传统换肤技术

css变量不普及前，换肤功能基本看不到，即使有换肤，也是每套皮肤都需要写一套css文件，成本非常大

优点：不需要依赖于css变量，如果是最求兼容性的话，不需要考虑太多东西。如果有颜色替换的插件的话，开发成本也会非常低

缺点：效果差，可以看看浏览器夜间模式的插件，大部分网页都会有瑕疵，且瑕疵程度不可控

只需要声明每套皮肤的css变量表，实际css开发时，用的都是变量

优点：相对于传统换肤技术，开发难度大大降低了，这也是现在换肤功能较为普遍的原因

缺点：前端开发者需要经常查阅颜色表

开发时只需要考虑颜色值即可，至于颜色替换啥的配置只需要配置一遍，对于开发时是完全透明的，开发时不需要考虑

优点：相对于只基于css变量的换肤技术而言，前端开发者不需要经常查阅颜色表，弥补了前者的缺点

缺点（postcss-peeling尚未完善点）：

与手动点击换肤按钮不同，跟随系统是自动的。

也可以做到既跟随系统，又有换肤按钮，而且不需要写太多代码。思路: 监听window.matchMedia的变化，一变化就切换:root的类名或属性。

css: @media(prefers-color-scheme: dark) {}

js:

const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {const isDark = e.matches})

跟随系统相关的postcss插件: github.com/postcss/pos…

真正的难点，我也还没认真研究

好像目前还没有这种库和插件

postcss插件: