前端页面主题颜色切换

最新推荐文章于 2023-09-17 13:53:16 发布

to be fan

最新推荐文章于 2023-09-17 13:53:16 发布

阅读量2.7k

点赞数

分类专栏： vue 文章标签： vue ant

本文链接：https://blog.csdn.net/yingmd2020/article/details/117658272

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

无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',
})

to be fan

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端页面主题颜色切换

无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样
复制链接

扫一扫

专栏目录