1、先创建一个 _theme.scss文件 作为各类主题颜色的整理
  1. $themes: (
  2. light: (
  3. //字体
  4. font_color1: #414141,
  5. font_color2: white,
  6. $color-yellow: rgb(238, 255, 0),
  7. //背景
  8. background_color1: $color-red,
  9. background_color2: #f0f2f5,
  10. background_color3: red,
  11. background_color4: #2674e7,
  12. //边框
  13. border_color1: #3d414a),
  14. dark: (
  15. //字体
  16. font_color1: #a7a7a7,
  17. font_color2: white,
  18. //背景
  19. background_color1: $color-light-gray,
  20. $color-yellow: rgb(0, 255, 0),
  21. background_color2: #283142,
  22. background_color3: #1e6ceb,
  23. background_color4: #323e4e,
  24. //边框
  25. border_color1: #3d414a));
  26. //变量
  27. $color-red: rgb(0, 0, 0);
  28. // $color-yellow: rgb(83, 149, 235);
  29. $color-white: white;
  30. $color-light-gray: #818380;))
2、然后再创建一个 _handle.scss 文件 作为sass混合函数的存放 主要是哪个页面需要则引用即可
  1. @import "./_themes.scss";
  2. //遍历主题map
  3. @mixin themeify {
  4. @each $theme-name,
  5. $theme-map in $themes {
  6. // !global 把局部变量强升为全局变量
  7. $theme-map: $theme-map !global;
  8. //判断html的data-theme的属性值 #{}是sass的插值表达式
  9. //& sass嵌套里的父容器标识 @content是混合器插槽,像vue的slot
  10. [data-theme="#{$theme-name}"] & {
  11. @content;
  12. }
  13. }
  14. }
  15.  
  16. //声明一个根据Key获取颜色的function
  17. @function themed($key) {
  18. @return map-get($theme-map, $key);
  19. }
  20.  
  21. //获取背景颜色
  22. @mixin background_color($color) {
  23. @include themeify {
  24. background-color: themed($color)!important;
  25. }
  26. }
  27.  
  28. //获取字体颜色
  29. @mixin font_color($color) {
  30. @include themeify {
  31. color: themed($color)!important;
  32. }
  33. }
  34.  
  35. //获取边框颜色
  36. @mixin border_color($color) {
  37. @include themeify {
  38. border-color: themed($color)!important;
  39. }
  40. }
3、在页面中使用 , app.vue
  1. html
    <div class="btn">
  2. <el-button type="warning" @click="theme('light')">浅色</el-button>
  3. <el-button type="danger" @click="theme('dark')">深色</el-button>
  4. </div>
  1. js
  2. //换主题
  3. theme(type) {
  4. // this.$store.commit("upDate", { themeType: type });
  5. window.document.documentElement.setAttribute("data-theme", type);
  6. },
  1. css

    @import "@/assets/_handle.scss";
  2.  
  3. //修改任何元素都可以作为等级最高级 原理就是根据html标签的 [name]来判断主题类型进行修改
  4. body {
  5. @include background_color(background_color4);
  6. .box {
  7. @include font_color("$color-yellow");
  8. @include background_color($color-yellow);
  9. @include border_color("border_color1");
  10. }
  11. .el-button {
  12. // @include background_color($color-yellow);
  13. &:hover {
  14. @include background_color($color-yellow);
  15. }
  16. }
  17. }

 

 
 
 
 
 
 

vue2 sass主题一键修改功能的更多相关文章

  1. 【Android进阶】使用第三方平台ShareSDK实现新浪微博的一键分享功能

    在公司最近的一个项目中,需要实现一键分享功能,在这里我使用的是第三方平台ShareSDK,将使用经验与大家分享 先看效果图 主界面 分享界面 由于第一次使用,所以需要先进行新浪授权,授权界面 分享结果 ...

  2. 使用VS中自带的一键打包功能将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理

    本章将和大家简单分享下如何使用VS中自带的一键打包功能将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理. 一.注册并登录NuGet平台 NuGet官网:http ...

  3. 如何让照片中的人物笑起来?HMS Core视频编辑服务一键微笑功能,让人物笑容更自然

    最近一键"露齿笑"席卷全网,无论是短视频用户还是社交App用户都在使用这项黑科技.当三两好友聚会拍集体照留念时,为了处理个别人的表情"瑕疵",让大家都尽量保持微 ...

  4. KingbaseES R6 集群一键修改集群和数据库参数测试案例

    ​ 案例说明: 集群环境修改集群或数据库参数,需要在每个node上都要修改,在每个节点而执行修改操作,容易出现漏改或节点上参数不一致等错误:在KingbaseES V8R6的集群中增加了,一键修改参数 ...

  5. KingbaseES R3 集群一键修改集群用户密码案例

    案例说明: 在KingbaseES R3集群的最新版本中增加了kingbase_monitor.sh一键修改集群用户密码的功能,本案例是对此功能的测试. kingbaseES R3集群一键修改密码说明 ...

  6. KingbaseES R6 集群sys_monitor.sh change_password一键修改集群用户密码

    案例说明: kingbaseES R6集群用户密码修改,需要修改两处: 1)修改数据库用户密码(alter user): 2)修改.encpwd文件中用户密码: 可以通过sys_monitor.sh ...

  7. php大力力 [052节] php数据库页面修改功能

    php大力力 [052节] php数据库页面修改功能

  8. android一键分享功能不使用任何第三方sdk

    在android中有自带的一键分享功能,不过它会把所有带分享的应用都找出来,如果我们只需要一些常见的分享应用,该如何做呢? 下面看我的效果图(横屏和竖屏自动适配): 接下来看我的调用(支持图片和文字分 ...

  9. 项目开发-->一键登录功能汇总

    开发网站经常会提供一些一键登录功能,如:QQ.新浪微博.淘宝账号.开心网账号.人人网账号等进行快捷登录,下面记录几个常用的开放平台地址,方便以后开发需要. 1.QQ互联 2.新浪微博 网站接入QQ互联 ...

随机推荐

  1. Mybatis 多表实现多对一查询、添加操作

    Mybatis 多表实现多对一查询.添加操作 学习内容: 1. 多对一之添加操作 1.1.需求 1.2.数据库表(多对一或一对多,数据库外键都是设置在多的一方) 1.3.类设计 1.4.Mapper ...

  2. DWR以及SSH集成DWR

    之前只是单独接触了DWR,知道一个基本的开发流程. web.xml配置文件: <!-- 配置Dwr信息 -->  <servlet>   <servlet-name> ...

  3. 微信h5静默和非静默授权获取用户openId和用户信息的方法和步骤:

    原文链接:https://blog.csdn.net/qq_35430000/article/details/79299529 一.openId是什么?openId是用户在当前公众号下的唯一标识('身 ...

  4. 关于data自定义属性

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

  5. JWT&RSA实现单点登录(详细介绍)

    今天给大家讲一下基于JWT&RSA的单点登录(Single Sign On,简称SSO)解决方案 概念 首先要了解几个概念 单点登录(Single Sign On) JWT RSA 背景 为什 ...

  6. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  7. JdGrid排序问题

    JdGrid排序问题 js代码 function gridList() { var $gridList = $("#gridList"); $gridList.dataGrid({ ...

  8. AcWing周赛43

    AcWing周赛43 题源:https://www.acwing.com/activity/content/1233/ 4314. 三元组 直接暴力做就是了,我一开始还在找规律..悲 我滴代码 #in ...

  9. 基础设施即代码(IAC),Zalando Postgres Operator UI 入门

    Postgres Operator UI 提供了一个图形界面,方便用户体验数据库即服务.一旦 database 和/或 Kubernetes (K8s) 管理员设置了 operator,其他团队就很容 ...

  10. 【学习笔记】CDQ分治(等待填坑)

    因为我对CDQ分治理解不深,所以这篇博客只是我现在的浅显理解有任何不对的,希望大佬指出. 首先就是CDQ分治适用的题型: (1)带修改,但修改互相独立 (2)必须允许离线 (3)解决数据结构的题,能把 ...