scss主题颜色切换
注明:在vue项目中,越来越多的客户要求可以自定义主题的颜色,使用scss改主题颜色是一个不错的方法,那下面简单说下scss怎么实现主题切换。
一.简单版本
1.定义方法,循环遍历映射集合,生成对应样式表
@import "./_themes.scss";//遍历主题map
@mixin themeify {@each $theme-name, $theme-map in $themes {//!global 把局部变量强升为全局变量$theme-map: $theme-map !global;//判断html的data-theme的属性值 #{}是sass的插值表达式//& sass嵌套里的父容器标识 @content是混合器插槽,像vue的slot[data-theme="#{$theme-name}"] & {@content;}}
}//声明一个根据Key获取颜色的function
@function themed($key) {@return map-get($theme-map, $key);
}//获取背景颜色
@mixin background_color($color) {@include themeify {background-color: themed($color)!important;}
}//获取字体颜色
@mixin font_color($color) {@include themeify {color: themed($color)!important;}
}//获取边框颜色
@mixin border_color($color) {@include themeify {border-color: themed($color)!important;}
}
2.定义颜色表
//当HTML的data-theme为dark时,样式引用dark
//data-theme为其他值时,就采用组件库的默认样式
//这里我只定义了两套主题方案,想要再多只需在`$themes`里加就行了
//注意一点是,每套配色方案里的key可以自定义但必须一致,不然就会混乱$themes: (light: (//字体font_color1: #414141,font_color2: white,//背景background_color1: #fff,background_color2: #f0f2f5,background_color3: red,background_color4: #2674e7,//边框border_color1: #3d414a,),dark: (//字体font_color1: white,font_color2: #414141,//背景background_color1: #1b2531,background_color2: #283142,background_color3: #1e6ceb,background_color4: #323e4e,//边框border_color1: #3d414a,)
);
3.使用动态绑定data-theme 并且定义class
<template><div class="common-util" :data-theme="type"><span @click="theme('iview')">默认</span><span @click="theme('light')">浅色</span><span @click="theme('dark')">深色</span></div>
</template><script>
export default {data() {return {type: "default",};},methods: {//换主题theme(type) {this.$store.commit("ACTIVE", type); //存在vuexthis.type = this.$store.state.type;window.document.documentElement.setAttribute("data-theme", type);},},
};
</script><style lang="scss" scoped>
@import "../assets/scss/_handle.scss"; //必须引入
span {display: block;padding: 2%;
}
.common-util {font-size: 18px;@include font_color("font_color1");@include background_color("background_color1");@include border_color("border_color1");
}
</style>
scss主题颜色切换相关推荐
- iview 实现在theme主题中添加某一个新模块的主题颜色切换
背景:直接下载的iview-admin 1.3.1模板 1.iview 自带主题theme 主要有4个颜色组成 分别为 默认的蓝色,其他分别为红色,蓝色,洋红色:然后在根据菜单栏是否为黑色和白色的组合 ...
- Ant-design-vue更换主题颜色
package.json "antd-theme-generator": "^1.2.5", "antd-theme-webpack-plugin&q ...
- vue基于scss的动态切换主题颜色
根据预设的配色方案,在前端动态切换系统主题颜色 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量. ...
- Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言 其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了 一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
- html 切换主题,html切换主题实现方案
方案一 使用css的var属性,当然此时不考虑低版本浏览器. 1,在default.css主题根元素定义颜色变量 :root { --main_color: #03a9f4; // 主题色 --mai ...
- vue 动态改变主题颜色
实现效果 一.应用方法 1.css3伪类选择器 2.CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值 . 语法 style ...
- 修改Kali Linux 2020.1主题颜色
修改Kali Linux 2020.1主题颜色 Kali Linux 2020.1安装后,默认主题颜色为Kali-Dark.用户使用的图形界面工具,界面颜色也都是黑乎乎,很多人都不喜欢.这里将分别介绍 ...
- Vue改变网页背景颜色切换
今天给大家分享一个好看的网页背景颜色切换的html文件 功能支持: 1.点击默认主题内容区域切换对应颜色,包括文字背景和文字颜色 2.在动态颜色中可以选择自己喜欢的颜色动态切换 实现代码: <! ...
- ant-design更换主题颜色
ant-design更换主题颜色 转载:https://blog.csdn.net/zhangyuxuan2/article/details/88868822 需求 使用ant-design-vue, ...
最新文章
- python第一次使用教程-Python考试_第一次
- c++ 管理员身份_CATIA的管理员模式和多版本环境变量设置
- bzoj1833: [ZJOI2010]count 数字计数(数位DP+记忆化搜索)
- Android 如何在App中启动系统闹钟
- 【图嵌入】DeepWalk原理与代码实战
- Java社区调查结果:74%的开发人员希望减少详细程度
- 使用JUnit规则测试预期的异常
- 鸿蒙分布式通讯子系统,【鸿蒙】分布式通信子系统--让华为手机发现Hi3861开发板...
- android webview es6,Android v 5.0 webview HTML5,CSS3和ES6兼容性
- mysql问题排查_mysql问题排查
- ROS-3DSLAM(4):lidar_odometry包浅析
- ubuntu16.04部署开源看板项目wekan(非docker部署)
- 如何在Windows中安全删除垃圾箱(回收站)
- JDK安全模块JCE核心Cipher使用详解
- linux下delete释放不了内存,c++delete后虚拟内存不降的原因(疑似内存泄漏)
- python读HDF数据
- 流放者柯南自建服务器 linux,流放者柯南自建服务器教程一览服务器搭建方法介绍...
- Android Studio运行app启动模拟器一直卡在“Wating for target device to come online”解决方法
- 毕业论文必备技巧:Word页脚及页眉设置
- 下载 axios.js 文件到本地