前端页面主题颜色切换
詹钊
无UI库依赖的主题切换
核心思想：css3中的
:root伪类选择器和var变量的应用
1、定义主题变量
:root {
--theme-color: #ccc;
}
2、使用主题变量
.test{
color: var(--theme-color);
}
3、动态改变主题
document.documentElement.style.setProperty('--theme-color', '#fff');
依赖于Ant Design的主题切换
前提，在main.js引入的必须是它的less样式文件
import 'ant-design-vue/dist/antd.less'
两种方案：
-
使用
antd-theme-webpack-plugin插件提取antd.less跟颜色有关系中的样式到指定文件，然后再引入这个文件，这样就会覆盖antd.less中的样式，具体方法百度 -
直接下载提取后的文件点击下载，然后在
index.html中引用<body> // 必须放在body里面，得保证在antd.less之后加载，这样才能覆盖 <link rel="stylesheet/less" type="text/css" href="/color.less"> // js必须放在css的后面，这样才能解析它 <script src="/less.js"></script> </body>color.less里面有一句:root { --primary-color: @primary-color; }如此，书写页面时使用
var(--theme-color)即可改变主题颜色
window.less.modifyVars({ '@primary-color': '#722ED1', })
类似资料：