elementUI 亮暗色切换和主题色设置 scss

首先要创建两套颜色主题

第一步：在根目录下创建存放主题.scss文件的目录，在改目录下创建主题.scss

第二步：设置两套背景和文字颜色

颜色的设置：尽量少，背景和字体颜色要相反，否则看不清。但是还要看UI的安排。

$themes: (light:(background_color: #XXXXXX,//背景色background_color_hei: #XXXXXX,//背景黑background_color_hui: #XXXXXX,//背景灰background_zong_color: #XXXXXX,//总背景色background_hover_color: #XXXXXX,//hover背景色text-color: #XXXXXX,// 主文本色fill: #XXXXXX,text-color-ol: #XXXXXX,// 次要文字颜色bg_color: #XXXXXX,//亮色下未选中的背景颜色bg_md_color: #XXXXXX,//亮色下选中的背景色icon_bg: #XXXXXX,//图标下面的背景颜色),dark: (background_color_hei: #XXXXXX,//背景黑background_color_hui: #XXXXXX,//背景灰background_color: #XXXXXX,//背景#222222background_zong_color: #XXXXXX,//总背景色background_hover_color: #XXXXXX,text-color: #XXXXXX,// 主文本色fill: #XXXXXX,//fill颜色text-color-ol: #XXXXXX,// 次要文字颜色bg_color: #XXXXXX,//暗色下未选中的背景颜色bg_md_color: #XXXXXX,//暗色下选中的背景色icon_bg: #XXXXXX,//图标下面的背景颜色)
);@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: themed($color) !important;}
}
//获取字体颜色
@mixin font_color($color) {@include themeify {color: themed($color) !important;}
}
@mixin font_fill($color) {@include themeify {fill: themed($color) !important;}
}

第三步：点击事件改变颜色模式

存到你需要的地方，这里我存在了全局变量和localStorage中

modelBrn() {let dark = !this.dark;if (dark) {window.document.documentElement.setAttribute("data-theme", "dark");} else {window.document.documentElement.setAttribute("data-theme", "light");}this.$store.commit("setData", {dark: dark,});localStorage.setItem("pc.cu.dark", dark);},

接下来就是在组件中使用啦

第四步：在<style>中引入主题.scss文件

@import "@/nightcss/wefor.scss";

第五步：使用

为dom设置背景颜色和字体颜色

.bi_class_input {// width: 40%;width: 288px;height: 32px;line-height: 24px;font-size: 16px;font-weight: 600;margin-left: 15px;@include background_color("icon_bg");  // 设置背景颜色@include font_color("text-color");     // 设置字体颜色border-radius: 16px;padding: 5px 3px 5px 8px;
}

最后，去点击切换主题色试验一下。

elementUI 亮暗色切换和主题色设置 scss相关推荐

vue + element-UI 实现深色模式和主题色动态切换
vue + element-UI 实现深色模式和主题色动态切换文章目录 vue + element-UI 实现深色模式和主题色动态切换前言深色模式和主题色动态切换本地样式切换主题色切换 el ...
iOS 主题色切换（附上源码）
前言前段时间有项目要求切换主题色,简单做了个Demo试了下还行,需要手动改下颜色配置,图片设置两份,代码在设置颜色的时候使用自定义的颜色宏定义,即可实现主题色切换,有兴趣的可以看下 1.ThemeM ...
ios设置tabbar背景颜色_WooCommerce微信小程序2.9.3版本发布后台设置主题色底栏装修定制...
更新又来咯! 本次更新主要以配置小程序方面的体验优化为主通过后台设置主题色以往更换小程序的主题色,需要重新下载小程序,万一小程序已经改动过,下载后又要重新修改一次本次更新后,主题色可直接在后台选 ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
Swift主题色顶级解决方案
一.常规主题色使用点应用在发布前都会对主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1. TabBar部分,设置图片高亮.文本高度颜色 2. Navigati ...
webpack插件实现自动抽取css中的主题色样式，并动态切换主题色（element-ui）
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
基于elementui的主题色改变和全网站色彩切换
主题色切换什么是主题色切换,所谓的主题色切换就是我们通过自定义的方式去修改elementUI原有的主题色,以达到我们业务所要使用的多(单)色彩切换. 静态切换 elementui 采用的是scss进 ...
vue中更改 element-ui主题色
第一步打开"elementUI官网" 点击"自定义主题", 找到"在线主题生成工具" 第二步点击"在线主题生成工具" ...
vue nuxt网站设置黑夜白天模式切换自动识别系统主题色变化
主要用到的方法 document.body.setAttribute("data-theme", 'dark'); window.matchMedia('(prefers-colo ...

elementUI 亮暗色切换和主题色设置 scss

elementUI 亮暗色切换和主题色设置 scss相关推荐

最新文章

热门文章