# 主题定制
WinDesign 的样式是使用 SCSS 编写的(开发者需提前配置 sass 开发环境)，开发者可以根据项目实际需要，修改主题相关的变量来实现主题定制需求。
# 🌈 内置主题
自win-design@2.0版本之后，组件内部新增了包括主题蓝（#2D5AFA, default.css）在内的共 16 组主题皮肤， 各主题文件入口如下表所示，更详细的配色方案请查看Color 色彩。
| 主题 | 色彩 | 主题样式文件名 |
|---|---|---|
| 主色蓝 | #2D5AFA | default.css |
| 天境蓝 | #0791EF | sky-blue.css |
| 竹月蓝 | #005D97 | industrial-blue.css |
| 深海蓝 | #0043B2 | azure-blue.css |
| 水湘青 | #2DB7A0 | bright-blue.css |
| 石涧蓝 | #2996AA | surgical-blue.css |
| 松柏绿 | #1F8970 | innovation-green.css |
| 冬青绿 | #196C35 | holly.css |
| 芙蓉粉 | #F24F86 | maternity-pink.css |
| 山梗紫 | #722ED1 | sauce-purple.css |
| 罗兰紫 | #8142B0 | dark-purple.css |
| 木槿紫 | #7753BD | lavender.css |
| 星云紫 | #422AA8 | grape-purple.css |
| 檀木棕 | #B16C3D | sunrise.css |
| 苍山棕 | #60493B | cuban-sand.css |
| 落栗棕 | #7B4A36 | calendula.css |
# 💅 定制主题
# 方式一：覆盖主题相关的 CSS 变量
自win-design@2.0版本之后，组件支持 CSS 变量换肤方案，开发者可以通过覆盖以下 CSS 变量完成动态换肤的需求（性能较优，推荐使用）。
| 序号 | 颜色 | CSS 变量名称 | 备注 | 是否必需配置 |
|---|---|---|---|---|
| 1 号色 | #2d5afa | --COLOR-NORMAL | 主要颜色 | 是 |
| — | 45, 90, 250 | --COLOR-NORMAL-RGB | 主要颜色 RGB 格式的值 | 是 |
| 2 号色 | #5175f4 | --COLOR-HOVER | hover 状态下 | 是 |
| 3 号色 | #1d39c4 | --COLOR-PRESS | focus | press 状态下 | 是 |
| 4 号色 | #eaeefe | --COLOR-NORMAL-BG | 按钮 plain 模式背景色与表头颜色 | 是 |
| 5 号色 | #C9D6FB | --COLOR-ACTIVE-BG | 选择器选中时背景色 | 是 |
| — | #000 | --FONT-COLOR-NORMAL | 默认字体色 | 否 |
| — | #666 | --FONT-COLOR-SECOND | 二号字体色 | 否 |
| — | #999 | --FONT-COLOR-THIRD | 三号字体色 | 否 |
# 具体实现方法
// 仅作为参考
export default {
methods: {
changeThemes() {
const _THEME_VARS = [
'--COLOR-NORMAL',
'--COLOR-NORMAL-RGB',
'--COLOR-HOVER',
'--COLOR-PRESS',
'--COLOR-NORMAL-BG',
'--COLOR-ACTIVE-BG'
]
const _THEMES = {
label: '主色蓝',
name: 'default',
'--COLOR-NORMAL': '#2D5AFA',
'--COLOR-NORMAL-RGB': '45, 90, 250',
'--COLOR-HOVER': '#5175f4',
'--COLOR-PRESS': '#1d39c4',
'--COLOR-NORMAL-BG': '#eaeefe',
'--COLOR-ACTIVE-BG': '#C9D6FB'
}
_THEME_VARS.forEach((key) => {
// 在 html 节点上添加 CSS 变量
document.documentElement.style.setProperty(key, _THEMES[key])
})
}
}
}
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
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
# 方式二：覆盖主题相关的 SCSS 变量
组件库所有组件的样式变量仍统一使用 SCSS 变量进行维护，开发者也可以采用全局 SCSS 变量的覆盖方式进行主题定制，具体主题与其他共享变量请查看win-design/lib/themes/core/variable/shared-var.scss 文件。
/* global color */
$--global-border-color: #c9c9c9 !default;
$--global-normal-bg: var(--COLOR-NORMAL-BG, #eaeefe) !default;
$--global-active-bg: var(--COLOR-ACTIVE-BG, #C9D6FB) !default;
/* theme colors */
$--color-primary: var(--COLOR-NORMAL, #2d5afa) !default;
$--color-primary-hover: var(--COLOR-HOVER, #5175f4) !default;
$--color-primary-press: var(--COLOR-PRESS, #1d39c4) !default;
$--color-primary-plain: $--global-normal-bg !default;
$--color-success: #00ab44 !default;
$--color-success-hover: #08c955 !default;
$--color-success-press: #186c3a !default;
$--color-success-plain: #e8f6ee !default;
/* font Size */
$--font-size-mini: 12px !default;
$--font-size-small: 13px !default;
$--font-size-base: 14px !default;
$--font-size-medium: 16px !default;
$--font-size-large: 18px !default;
$--font-size-extra: 20px !default;
/* icon color */
$--icon-color: #7e89a4 !default;
// ...
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
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
# 具体覆盖方法
- vue-cli 3.0(推荐)
# Step 1： 新建主题变量文件 themes.scss
// themes.scss
$--color-primary: blue;
$--color-success: green;
...
1
2
3
4
2
3
4
# Step 2：修改 vue.config.js
通过注入全局 scss 变量的方式来覆盖组件库中对应的 scss 变量，从而完成主题色替换的需求。
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
// 根据自己样式文件的位置调整
data: `@import "@/themes.scss";`
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Step 3：引用主题样式
// main.js 引入默认样式scss文件
import 'win-design/lib/themes/default.scss'
1
2
2
- 其他(非正式解决方案)
WARNING
使用 vue-cli2.0 构建的项目或非脚手架搭建的项目，对主题实现定制时，需要借助 sass-loader 的 data参数来为项目注入全局 SCSS 变量，覆盖 WinDesign 主题样式变量。
# Step 1： 新建主题变量文件 themes.scss
// themes.scss
$--color-primary: blue;
$--color-success: green;
...
1
2
3
4
2
3
4
# Step 2：修改 loader 相关配置
// vue-cli 2.0 build/utils.js
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader',
options: {
//你自己的scss全局文件的路径
resources: path.resolve(__dirname, '../src/themes.scss')
}
})
// 其他一般情况 webpack.base.conf.js
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader',
options: {
//你自己的scss全局文件的路径
resources: path.resolve(__dirname, '../src/themes.scss')
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
WARNING
在主题定制时使用按需引入需要修改@win-design/babel-plugin-import 插件的配置。
// 以下为@win-design/babel-plugin-import默认配置
module.exports = {
...
plugins: [
["@win-design/babel-plugin-import", {
"libraryName": "win-design", // 组件库名称
"componentsPath": "packages/components", // 插件路径
"stylePath": "packages/themes", // 样式路径
"suffix": "scss" // 样式后缀
}]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12