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,
      //背景#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