vue动态改变主题颜色

新建.scss后缀公用文件，放在assets或者其他地方都可以

/*需要切换的颜色变量*/
$color-primary1:#1776E1; /* 更换的颜色 */
$color-primary2:#3588CB; /* 更换的颜色 */
$color-primary3:#7D0000; /* 更换的颜色 */
$color-primary4:#EB6100; /* 更换的颜色 *//*定义方法*/
@mixin color_primary($color){color:$color;/*判断匹配*/[data-theme="primary1"] & {color:$color-primary1;}[data-theme="primary2"] & {color:$color-primary2;}[data-theme="primary3"] & {color:$color-primary3;　　 }　　 [data-theme="primary4"] & {   　　　　 color:$color-primary4;　　 }}

在需要用到的页面引入

调用

 p {// color: #055caa;@include color_primary($color-primary1);}

需要匹配什么颜色，就传定义好的变量名

如何一键控制全局

window.document.documentElement.setAttribute('data-theme', 'primary4');

在app.vue（或者其他地方）写入此方法，只需要在第二个参数位置传入你所定义的变量名即可动态改变所有调用

@include color_primary($color-primary1);方法的颜色；

vue动态改变主题颜色相关推荐

vue 动态改变主题颜色
实现效果一.应用方法 1.css3伪类选择器 2.CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值 . 语法 style ...
WPF动态改变主题颜色
国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式--动态改变主题色. 程序允许用户根据自己的喜好来对界面进行配色,这种技术在很多软件中都 ...
antd动态换主题颜色
1.下载插件 npm add antd-theme-generator && yarn add antd-theme-generator 2.根目录添加color.js const p ...
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
vue改变html的背景,vue动态改变背景图片demo分享
如下所示: #bag{ width: 200px; height: 500px; margin: 0 auto; background: url(img/piao11.jpg) center no-r ...
vue基于scss的动态切换主题颜色
根据预设的配色方案,在前端动态切换系统主题颜色大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量. ...
vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...
mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色
微信小程序,mpvue中使用svg图标,并通过代码改变图标颜色本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同 ...
一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...

vue动态改变主题颜色

vue动态改变主题颜色相关推荐

最新文章

热门文章