前言
需求是一个页面中需要多种不同的配色，本文采用的是通过全局scss文件，利用变量控制颜色实现主体切换。
- 安装scss依赖(如果项目中已有scss可跳过此项)：
npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader- 在src/assets新建目录scss，以及新建theme.scss主题文件
// scss样式
$themes: (
light: (
background_color: #cccccc,//背景色
text-color: rgba(0, 0, 0, 0.65), // 主文本色
),
dark: (
background_color: #181c27,//背景
text-color: rgba(255, 255, 255, 0.65), // 主文本色
)
);
// 处理样式，遍历主题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 background_color($color) {
@include themeify {
background: themed($color)!important;
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
}
}
- 在main.js中引入theme.scss
import "./assets/scss/theme.scss";- 在assets/scss目录下新建common.scss文件，并common.scss中引入theme.scss
import './theme.scss'
// 模式切换
$themes: (
light: (
background_color: rgba(255,255,255,1),//#ffffff,//背景色
background_color1: #ffffff,//背景色
background_color2: #f7f7f7,//背景色
background_color3: #e9e9e9,//背景色
background_color4: #000000,//背景色
background_color5: #f4f4f4,//背景色
background_color6: #f4f7fd,//背景色
background_color7: rgba(255,255,255,1),//#ffffff,//背景色
background_color8: #ffffff,//#ffffff,//背景色
background_color9: #cccccc,//#ffffff,//背景色
text-color: rgba(0, 0, 0, 0.75), // 主文本色
text-color1: rgb(0, 0, 0), // 主文本色1
text-color2: #999, // 主文本色2
text-color3: #666, // 主文本色3
text-color-hover: #317adf, // hover文本色
border_style: 1px solid #ebeef5, // 主边框色
border_style1: 1px solid #dddddd, // 主边框色1
border_style2: 1px solid skyblue, // 主边框色2
border_style3: 1px solid #ebeef5, // 主边框色3
border_style4: 1px solid #ebeef5, // 主边框色4
border_bottom_style: 1px solid #f4f4f4, // 下边框色
border_bottom_style1: 1px solid #f6f6f6, // 下边框色1
border_right_style: 1px solid #f1f1f1, // 右边框色
border_top_style: 1px solid #f1f1f1, // 上边框色 (未使用)
box_shadow: 0 1px 3px 0 #ddd, // 主阴影
),
dark: (
background_color: #1c1f2d,//rgba(25, 28, 38,.8),//#181c27,//rgba(0, 0, 0, 0.35),//背景
background_color1: #1e1e1e,//背景1
background_color2: #1e1e1e,//背景2
background_color3: #252526,//背景3
background_color4: #f7f7f7,//背景4
background_color5: linear-gradient(to right bottom,#000 25%,#480048),//#333333,//背景5
background_color6: #1e1e1e,//背景6
background_color7: #181c27,//rgba(0, 0, 0, 0.35),//背景
background_color8: #1e2028,//rgba(0, 0, 0, 0.35),//背景
background_color9: #333333,//rgba(0, 0, 0, 0.35),//背景
text-color: rgba(255, 255, 255, 0.7), // 文本色
text-color1: rgba(255, 255, 255, 0.65), // 文本色1
text-color2: #999, // 主文本色2
text-color3: #aaa, // 主文本色3
text-color-hover: #f1cb64, // hover文本色
border_style: none, // 边框色
border_style1: 1px solid #333333, // 边框色1
border_style2: 1px solid #666666, // 边框色2
border_style3: 1px solid #333333, // 边框色3
border_style4: 1px solid #333333, // 边框色4
border_bottom_style: 1px solid #252526, // 下边框色
border_bottom_style1: 1px solid #1e1e1e, // 下边框色1
border_right_style: 1px solid #252526, // 右边框色
border_top_style: 1px solid #252526, // 上边框色
box_shadow: 0 1px 3px 0 #181c27, // 主阴影
)
);- 在Home.vue中使用
- 以上就基本配置了主题切换的样式，文中只配置了两种主题，需要配置更多的主题，在common.scss文件中添加不同“light” 或者“dark”值即可。