前端切换主题颜色的几种思路

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端切换主题颜色的几种思路相关的知识,希望对你有一定的参考价值。

参考技术A 如果主题提前配置好是固定的:
1.采用配置不同theme的css文件,使用scss+替换body的class命名空间进行样式覆盖

setting.scss

common.scss

最后形成两个主题文件后,修改body的class就可达到切换主题的目的

2.引用不同的link文件,与上述同理先形成css文件,通过动态改变link引用达到切换主题目的

如果主题不固定的,可借用webpack插件:webpack-theme-color-replacer实现:
vue-cli3配置

app-config.js文件

配置babel.config.js

在utils文件中定义一个themeColorClient.js 用于初始化主题色和记录主题色

除了修改elementUI主题色之外,我们还需要配置其他自己写的样式,需要用到element ui中定义的一些变量
可通过引用@import "../../../node_modules/element-ui/packages/theme-chalk/src/common/var.scss"; 获得element-ui中的变量,并使用,这样可达到一起切换主题效果

Vue更换主题色的几种方法思路

参考技术A 这段时间在学习vue-element-admin,读到花裤衩大神的 手摸手,带你用vue撸后台 系列三(实战篇) ,看到更换主题色的方法,文章内是使用一次打包各个主题css的文件,然后根据body类名变化来改变样式的。
受启发后,想看看有没有其他一些动态修改主题色的方案,就网上搜索了一下,总结了以下几种方法

以上是关于前端切换主题颜色的几种思路的主要内容,如果未能解决你的问题,请参考以下文章

一本正经的聊聊手机主题颜色随手机壳颜色变化的几种方案

前端设置任何颜色作为主题色方法(不用预先指定固定几种),吐血整理!

java里颜色类默认的几种颜色对应的int值是多少?

设置颜色的几种写法

VS开发工具切换主题颜色

开发工具visual studio code切换主题颜色