新建主题色

css/_themes.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
$themes: (
  basic: (
    basic_color: #3064e7,
    // 主题色
    logo_color: #3064e7,
    // 主题色字体
    title_color: #494d50,
    //新增、注册、行业标头字体颜色
    foot_tolor: #5e6165,
    // 页脚字体颜色
    font_color1: #909399,
    font_color2: #909399,
    // 小logo图片
    logo_image: url('@/assets/imgs/logo.png'),
    // 首页搜索按钮
    search_btn: linear-gradient(187deg, #5e9df5 0%, #3064e7 47%),
    // 注册动态下边框
    border_bottom_1: 1px solid #3064e7,
    // 注册动态边框
    card_border_1: 1px solid rgba(208, 211, 219, 1),
    // 注册动态卡片背景
    zhuce_card: #fff,
    // 新闻标题聚焦颜色
    font_hover: #3064e7,
    //背景
    navbar_background: #fff,
    background_color2: #f0f2f5,
    // 新闻时事背景
    // news_background:  #fff,
    // 注册动态背景
    zhuce_background: #fff,
    // 行业资讯背景
    hangye_background: #fff,
    background_color3: red,
    background_color4: #2674e7,
    //边框
    border_bottom: 5px solid #4554de
  ),
  red: (
    basic_color: #d0021b,
    logo_color: #fff,
    title_color: #494d50,
    //新增、注册、行业标头字体颜色
    foot_tolor: #5e6165,
    // 页脚字体颜色
    font_color1: #909399,
    font_color2: #fff,
    // 新闻标题聚焦颜色
    font_hover: #d0021b,
    // 小logo图片
    logo_image: url('@/assets/imgs/logo_white.png'),
    // 首页搜索按钮
    search_btn: linear-gradient(187deg, #d20000 0%, #da0707de 47%),
    // 注册动态下边框
    border_bottom_1: 2px solid #d0021b,
    // 注册动态边框
    card_border_1: 1px solid rgba(208, 211, 219, 1),
    // 注册动态卡片背景
    zhuce_card: #fff,
    background_color2: #283142,
    // 新闻时事背景
    // news_background:  #fff,
    // 注册动态背景
    zhuce_background: #fff,
    // 行业资讯背景
    hangye_background: #fff,
    background_color3: #1e6ceb,
    background_color4: #323e4e,
    //边框
    border_bottom: 5px solid #fff
  ),
  blue: (
    basic_color: #0decff,
    logo_color: #fff,
    title_color: #fff,
    //新增、注册、行业标头字体颜色
    foot_tolor: #b2d4f5,
    // 页脚字体颜色
    font_color1: #909399,
    font_color2: #fff,
    // 新闻标题聚焦颜色
    font_hover: #0e458c,
    // 小logo图片
    logo_image: url('@/assets/imgs/logo_white.png'),
    // 首页搜索按钮
    search_btn: linear-gradient(187deg, #0076ff 0%, #0076ff 47%),
    // 注册动态下边框
    border_bottom_1: 2px solid #0decff,
    // 注册动态卡片背景
    zhuce_card: #034488,
    // 注册动态边框
    card_border_1: 2px solid rgba(8, 93, 185, 1),
    //背景
    navbar_background: #0e458c,
    foot_background: linear-gradient(131deg, #005fbc 0%, #08215f 100%),
    // 注册动态背景
    zhuce_background: #033367,
    // 行业资讯背景
    hangye_background: #033367,
    background_color2: #283142,
    background_color3: #1e6ceb,
    background_color4: #323e4e,
    //边框
    border_bottom: 5px solid #fff
  )
);

mixins遍历变量

css/_handle.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@import './_themes.scss';
// 遍历主题map
@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 bgc($color) {
  @include themeify {
    background-color: themed($color);
  }
}
// 获取背景图片
@mixin bg($color) {
  @include themeify {
    background: themed($color);
  }
}

// 获取图片
@mixin content($color) {
  @include themeify {
    content: themed($color);
  }
}

// 获取底部border
@mixin border_bottom($color) {
  @include themeify {
    border-bottom: themed($color);
  }
}

// 获取背景图片
@mixin border($color) {
  @include themeify {
    border: themed($color);
  }
}

// 获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color);
  }
}

// 获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color);
  }
}

切换主题

1
window.document.documentElement.setAttribute('data-theme', 'blue');

使用主题

1
2
3
4
5
6
@import '@/assets/css/_handle.scss';


.test {
  @include bgc('basic_color');
}