这段时间在学习vue-element-admin,读到花裤衩大神的手摸手,带你用vue撸后台 系列三(实战篇),看到更换主题色的方法,文章内是使用一次打包各个主题css的文件,然后根据body类名变化来改变样式的。
受启发后,想看看有没有其他一些动态修改主题色的方案,就网上搜索了一下,总结了以下几种方法
变更主题的方法 | 主题样式引入方式 | 优点 | 缺点 |
---|---|---|---|
改变类名 | 提前全部引入 | 变更速度快,操作简单 | 需要一次过引入全部主题样式 |
改变类名 | 通过link动态引入 | 变更主题色方便,主题色多的时候可按需加载 | 配置稍微复杂 |
改变变量 | 通过改变:root伪类的颜色值,配合var()函数变更样式 | 配置简单 | 刷新后变量重置,需要加入缓存管理,而且写样式值时需用var()函数,增加代码量 |