vue 实现切换主题色（低配版）

切换主题功能，本文采取 CSS自定义变量实现

使用 document.body.style.setProperty(‘–bg’, ‘red’); 来设置变量
使用 document.body.style.getPropertyValue(‘–bg’); 来获取变量
使用 document.body.style.removeProperty(‘–bg’);来删除变量
var()来访问。第二个值表示变量的默认值。如:var(–bg,‘#fff’)
:root {}声明变量，变量名前需用 – 开头

关键代码

<template><div id="content"><button @click="handleTheme(1)">金色主题</button><button @click="handleTheme(2)">蓝色主题</button><button @click="handleTheme(3)">带背景图主题</button><div>我是一段描述</div></div>
</template><script>
export default {data() {return {};},methods: {handleTheme(target) {if (target === 1) {document.documentElement.style.setProperty("--a", "gold");document.documentElement.style.setProperty("--b", "#000");document.documentElement.style.setProperty("--c", "12px");}if (target === 2) {document.documentElement.style.setProperty("--a", "blue");document.documentElement.style.setProperty("--b", "#555");document.documentElement.style.setProperty("--c", "18px");}if (target === 3) {document.documentElement.style.setProperty("--a",`url(${require("@/assets/logo.png")})`);document.documentElement.style.setProperty("--b", "red");document.documentElement.style.setProperty("--c", "24px");}},},
};
</script><style lang="less" scoped>
@import url("../../index.less");
</style>

index.less代码

:root {--a: red;--b: yellow;--c: 16px;
}#content {background: var(--a);height: 500px;width: 400px;font-size: var(--c);color: var(--b);
}

实现效果

vue 实现切换主题色（低配版）相关推荐

vue动态切换主题色
1,style文件中新建一个theme.json用来进行主题样式存储 {"blue": {"--themeColor": "#1eafc5" ...
vue动态发布到线上_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css,具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
PS快捷键大法，初级低配版
在PS中,对于初学者,我个人认为其实不用快捷键更能深刻的理解各个工具.操作之间联系和原理,但对于以后的作图修图来说,快捷键实在是装逼利器,并且确实方便快捷,能给我们的工作带来很多便捷.百度上的PS快捷 ...
java muki_基于canvas和web audio实现低配版MikuTap
导言最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...
typescript用什么软件写_用TypeScript写了个低配版H5美图工具
前言最近两月在学习canvas时候,发现很多有意思的技术能力,特别是在图像处理这一领域.让我想起大学课堂教学的<数字图像处理>(冈萨雷斯版本).但是很遗憾的是,大学上完课应付考试后全部 ...
案例：华为FusionInsight_HD 低配版（三台）安装实例 -- 手动安装
本文为安装华为FusionInsight_HD 低配版(三台)安装实例,给小伙伴们参考: 本文选择三台机器安装,实际安装中发现,不能使用华为给的安装引导文件的(FusionInsight V100R0 ...
实现一个基于 IConfiguration 的低配版 FeatureFlag
实现一个基于 IConfiguration 的低配版 FeatureFlag Intro 在我们的应用中,可能有一些配置开关的需求,某些功能是否启用使用一个配置开关,用的时候就打开,不用的时候就关掉, ...

vue 实现切换主题色（低配版）

切换主题功能，本文采取 CSS自定义变量实现

vue 实现切换主题色（低配版）相关推荐

最新文章

热门文章

vue 实现切换主题色（低配版）

切换主题功能，本文采取 CSS自定义变量 实现

vue 实现切换主题色（低配版）相关推荐

最新文章

热门文章

切换主题功能，本文采取 CSS自定义变量实现