html样式自动提取,webpack插件实现自动抽取css中的主题色样式，并一键动态切换主题色（element-ui）...

痛定思痛。 2022-10-05 15:56 183阅读 0赞

大家项目中经常会有切换UI主题色的需要。比较常用的做法，是将UI库相关css全部下载，替换其中的颜色，再应用到页面。这样做有几个问题：

1、需要下载整个UI库的样式css。文件较大，下载慢且影响性能。

2、只能替换UI库本身的颜色样式，项目中自己写的颜色样式替换不掉。

3、全部的UI样式都重新覆盖，渲染较慢，且容易导致覆盖已有样式出现意外问题。

其他方案，比如做几套固定颜色的css主题包，维护成本较大，且颜色不能自定义，一般较少用。

其实css中带颜色的样式规则只占了所有css中很少的一部分。所以，我希望可以只替换css中与颜色相关的部分样式规则。

于是写了个webpack插件来实现这个功能。

基本思路就是，webpack构建时，在emit事件(准备写入dist结果文件时)中，将即将生成的所有css文件的内容中 带有指定颜色的css规则单独提取出来，再合并为一个theme-colors.css输出文件。然后在切换主题色时，下载这个文件，并替换为需要的颜色，应用到页面上。这样，下载的样式中就只包含颜色相关的css规则，文件较小；同时它已经包含了项目中所有的css中的指定颜色样式，一次下载全部颜色样式都搞定。

经过反复测试，实现的效果比较理想。而且还可以根据需要，替换掉任意数目的颜色。理论上是只要是css的颜色，都可以通过这个插件来提取颜色样式。

为了方便使用，目前集成了element-ui的系列主题色获取方法(即根据主色得到同一色调由浅入深的一系列颜色)在组件里。代码已开源在github，欢迎fork并提交其他UI库的主题色获取方法。

分享给大家：

适用场景

理论上，只要是使用webpack + css-loader来进行构建的项目，都可以用类似的方法来实现主题色动态切换。输入文件可以是任意css文件或css-loader生成的js文件。

1.3.3之后的版本，增加了在nodejs直接调用提取css中的主题颜色的方法，像gulp这样的项目也可以用了。这个项目中有完整的示例, 基于vue + element-ui

其他一些常见项目我也有做了例子，可供参考：vue-element-admin, 基于vue + element-ui

ant-design, 基于react + typescript + ant-design

ant-design-vue, 基于vue + ant-design-vue

iview, 基于vue + iview

效果：

原始顏色：

![bVbs5S8][]

切換後：

![bVbs5Ta][]

[bVbs5S8]: https://segmentfault.com/img/bVbs5S8
[bVbs5Ta]: https://segmentfault.com/img/bVbs5Ta

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd 在webpack.config配置主题色

> 虽然官方提供了craco-less 来覆盖less-loader 提供的 less 变量，但自己也想试着修复config来配置一下首先需要运行 [yarn eject

末蓝、/ 2023年01月01日 13:57/ 0 赞/ 225 阅读

相关 vue 使用 css/less 动态更换主题色

.css .drak-theme { --color-primary: 000000; } .light-theme {

﹏ヽ暗。殇╰゛Y/ 2022年12月25日 08:53/ 0 赞/ 208 阅读

相关如何进行纯css控制切换主题色或一键更换背景色(更换主题色)

![20201123202342857.gif][] 下面说的是vue+less项目中利用纯css控制方法： 1.在你项目的common样式表里（应该有通用

向右看齐/ 2022年12月23日 07:11/ 0 赞/ 203 阅读

相关 electron-vue 使用sass全局样式变量实现统一主题色

安装sass-resources-loader包 npm install --save-dev sass-resources-loader 修改webp

水深无声/ 2022年11月29日 12:21/ 0 赞/ 245 阅读

相关 PySimpleGUI主题色大全

PySimpleGUI主题色大全 sg.theme('Theme Name') Add a little color to your windows ![在这里

水深无声/ 2022年10月29日 12:25/ 0 赞/ 319 阅读

相关 html样式自动提取,webpack插件实现自动抽取css中的主题色样式，并一键动态切换主题色（element-ui）...

大家项目中经常会有切换UI主题色的需要。比较常用的做法，是将UI库相关css全部下载，替换其中的颜色，再应用到页面。这样做有几个问题： 1、需要下载整个UI库的样式css。文

痛定思痛。/ 2022年10月05日 15:56/ 0 赞/ 184 阅读

相关如何对图片主题色进行提取

一起网易云 ???? 网易云音乐想必是大家很熟悉的一款 app 了，毕竟大家在深夜都会`网抑云`![3332370a0bfe5e444ef8b451bff25961.pn

r囧r小猫/ 2022年09月04日 06:51/ 0 赞/ 195 阅读

相关 SpringBoot切换项目主题样式功能实现

有时候需要我们的项目有多种主题来满足不同使用用户各种审美的需求。本文目的：springboot框架下实现静态切换主题（需重启生效）功能实现。不讲原理（Spring Web

川长思鸟来/ 2022年05月14日 08:28/ 0 赞/ 399 阅读

相关 idea主题样式插件

1、File->Settings...->Plugins中搜索Material Theme UI，然后点击安装，安装完成后重启Idea ![watermark_type_Zm

矫情吗；*/ 2022年01月30日 06:07/ 0 赞/ 404 阅读

相关通过js定义变量控制css 颜色实现切换主题色

案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T...

系统管理员/ 2021年01月19日 17:15/ 0 赞/ 958 阅读