styles > theme.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$themes: (
        // 亮
        light:(
          // 背景颜色
                them-bg-color: #fff,
                them-main-bg-color: #fff,
                them-font-color: #000,
                them-sidebar-shadow-color: 1px 1px 20px rgba(0, 0, 0, .4)

          //布局
          //      basis-color: $blove-color,
          //      menu-hover-color: #FFFFFF,
          //      them-title-background:#D2D8EA,
          //      them-title-color: #1684FC,
          // 按钮
          //      btn-primary-background: $blove-color,
          //      btn-primary-boder: 1px solid $blove-color,
          //      btn-primary-color: #FFFFFF,
          //      btn-primary-background-hover:#409eff,
          //      btn-primary-boder-hover: 1px solid #409eff,
          //      btn-primary-color-hover: #FFFFFF,
        ),
        // 暗
        dark:(
          // 背景颜色
                them-bg-color: #18181c,
                them-main-bg-color: #101014,
                them-font-color: #fff,
                them-sidebar-shadow-color: 1px 1px 20px rgba(0, 0, 0, 1)
          // 布局
          //      basis-color: $flammulated-color,
          //      menu-hover-color: #FFFFFF,
          //      them-title-background: #EAD2D2,
          //      them-title-color: #E33F3F,
          // 按钮
          //      btn-primary-background: $flammulated-color,
          //      btn-primary-boder: 1px solid $flammulated-color,
          //      btn-primary-color: #FFFFFF,
          //      btn-primary-background-hover: #f86065,
          //      btn-primary-boder-hover: 1px solid #f86065,
          //      btn-primary-color-hover: #FFFFFF,
        )
)

styles > mixins.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import './theme.scss'; //导入颜色列表

//生成对应元素的主题样式代码 生成 map
@mixin theme($themes) {
  @each $themes-key, $themes-map in $themes {
    $themes-map: $themes-map !global;
    [data-theme=#{$themes-key}] #{if(&, "&", "*")} {
      @content;
    }
  }
}

//获取对应的主题数据， 通过 键 获取 map中对应的值
@function t($key){
  @return map-get($themes-map, $key);
};

使用

根据 &key值获取 theme.scss 下的不同主题颜色，随着 data-theme='theme' 主题值的变化， 则 key 也随之获取当前所切换的主题颜色!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 这里 为 navbar sidebar，el-main 等设置了 dark 和 light 下 所展示的不同背景 及 字体颜色 */
@include theme($themes) {
	.el-menu,.el-menu-item:not(.el-menu-item.is-active):not(.el-menu-item:hover){
		color: t('them-font-color') !important;
		background-color: t('them-bg-color') !important;
	}
	.el-submenu__title{
		color: t('them-font-color') !important;
		background-color: t('them-bg-color') !important;
	}
	.el-main,.breadcrumb,.tags-view{
		color: t('them-font-color') !important;
		background-color: t('them-main-bg-color') !important;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color: t('them-font-color') !important;
	}
	.sidebar_stretch,.sidebar_shrink{
		box-shadow: t(them-sidebar-shadow-color);
	}
}
1
2
3
4
5
6
<!-- theme | dark | light -->
<template>
  <div id="app" :data-theme="theme">
    <router-view/>
  </div>
</template>
1
2
3
4
5
6
7
8
<script>
  import { mapGetters } from "vuex";
  export default {
    computed: {
      ...mapGetters(['theme'])
    }
  }
</script>