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

2021-10-22 12:06:08 阅读：1284 来源： 互联网

标签：scss 颜色 XXXXXX elementUI color dark theme 暗色 background

首先要创建两套颜色主题

第一步：在根目录下创建存放主题.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,
      //背景#222222
      background_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;
}

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

标签：scss,颜色,XXXXXX,elementUI,color,dark,theme,暗色,background
来源： https://blog.csdn.net/Liu_JiaqiPro/article/details/120902596

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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