# 自定义主题
背景知识
First UI 默认提供了一套主题，并使用 CSS 变量 (opens new window)来实现定制主题，链接中的内容可以帮助你对 CSS 变量 概念有基本的认识，避免许多不必要的困扰。
CSS 变量 的兼容性要求可以在 这里 (opens new window) 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效，也可通过props属性修改样式。
# 支持平台
Nvue 端请使用 全局配置 文件修改主题色。
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 |
|---|---|---|---|---|---|---|---|
| ✓ | × | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 样式变量
First UI 的 CSS 变量 写在 components/firstui/fui-theme/ 目录下的 fui-theme.css 文件中。
/*
FirstUI组件内置的基础变量
1.如果你是组件使用者，你可以通过修改这些变量的值来定制自己的组件主题，实现自定义主题功能
2.如果全局修改需要在项目根目录下App.vue文件中引入此css文件
3.如果组件中有props属性是针对颜色设置（默认为空值），则优先级：props变量（如果有传值）> 全局主题色
*/
/* #ifndef APP-NVUE */
page {
/* 行为相关颜色 */
--fui-color-primary: #465CFF;
--fui-color-success: #09BE4F;
--fui-color-warning: #FFB703;
--fui-color-danger: #FF2B2B;
--fui-color-purple: #6831FF;
/* 文字基本颜色、其他辅助色 */
/* 用于重量级文字信息、标题 */
--fui-color-title: #181818;
/* 用于普通级段落信息、引导词 */
--fui-color-section: #333333;
/* 用于次要标题内容 */
--fui-color-subtitle: #7F7F7F;
/* 用于底部标签、描述、次要文字信息 */
--fui-color-label: #B2B2B2;
/* 用于辅助、次要信息、禁用文字等。如：待输入状态描述文字，已点击按钮文字 */
--fui-color-minor: #CCCCCC;
--fui-color-white: #FFFFFF;
/* 链接颜色 */
--fui-color-link: #465CFF;
/* 背景颜色 */
--fui-bg-color: #ffffff;
/* 页面背景底色 */
--fui-bg-color-grey: #F1F4FA;
/* 内容模块底色 */
--fui-bg-color-content: #F8F8F8;
--fui-bg-color-red: rgba(255, 43, 43, .05);
--fui-bg-color-yellow: rgba(255, 183, 3, .1);
--fui-bg-color-purple: rgba(104, 49, 255, .05);
--fui-bg-color-green: rgba(9, 190, 79, .05);
/* 点击背景色 */
--fui-bg-color-hover: rgba(0, 0, 0, 0.2);
/* 遮罩颜色 */
--fui-bg-color-mask: rgba(0, 0, 0, 0.6);
/* 边框颜色 */
--fui-color-border: #EEEEEE;
/* 阴影颜色 */
--fui-color-shadow: rgba(2, 4, 38, 0.05);
/*禁用态的透明度 */
--fui-opacity-disabled: 0.5;
/* 图标尺寸 */
--fui-img-size-sm: 48rpx;
--fui-img-size-base: 56rpx;
--fui-img-size-middle: 64rpx;
--fui-img-size-lg: 96rpx;
/* 图片尺寸 */
--fui-img-sm: 60rpx;
--fui-img-base: 120rpx;
--fui-img-lg: 240rpx;
/* Border Radius */
--fui-border-radius-sm: 16rpx;
--fui-border-radius-base: 24rpx;
--fui-border-radius-lg: 48rpx;
--fui-border-radius-circle: 50%;
/* 水平间距 */
--fui-spacing-row-sm: 16rpx;
--fui-spacing-row-base: 24rpx;
--fui-spacing-row-lg: 32rpx;
/* 垂直间距 */
--fui-spacing-col-sm: 8rpx;
--fui-spacing-col-base: 16rpx;
--fui-spacing-col-lg: 24rpx;
}
/* 暗黑模式下颜色变量 */
@media(prefers-color-scheme: dark) {
page {
/* 行为相关颜色 */
--fui-color-primary: #465CFF;
--fui-color-success: #09BE4F;
--fui-color-warning: #FFB703;
--fui-color-danger: #FF2B2B;
--fui-color-purple: #6831FF;
/* 文字基本颜色、其他辅助色 */
/* 用于重量级文字信息、标题 */
--fui-color-title: #D1D1D1;
/* 用于普通级段落信息、引导词 */
--fui-color-section: #A3A3A3;
/* 用于次要标题内容 */
--fui-color-subtitle: #8C8C8C;
/* 用于底部标签、描述、次要文字信息 */
--fui-color-label: #8D8D8D;
/* 用于辅助、次要信息、禁用文字等。如：待输入状态描述文字，已点击按钮文字 */
--fui-color-minor: #5E5E5E;
--fui-color-white: #FFFFFF;
/* 链接颜色 */
--fui-color-link: #465CFF;
/* 背景颜色 */
--fui-bg-color: #1B1B1B;
/* 页面背景底色 */
--fui-bg-color-grey: #111111;
/* 内容模块底色 */
--fui-bg-color-content: #222222;
--fui-bg-color-red: #222222;
--fui-bg-color-yellow: #222222;
--fui-bg-color-purple: #222222;
--fui-bg-color-green: #222222;
/* 点击背景色 */
--fui-bg-color-hover: #333333;
/* 遮罩颜色 */
--fui-bg-color-mask: rgba(0, 0, 0, 0.6);
/* 边框颜色 */
--fui-color-border: #242424;
/* 阴影颜色 */
--fui-color-shadow: rgba(17, 17, 17, 0.5);
}
}
/* #endif */
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
# 定制方法
定制单个组件的主题样式
在 css 中为组件设置 CSS 变量 。
<fui-button text="默认按钮"></fui-button>
<view class="fui-btn__box">
<fui-button text="自定义主题"></fui-button>
</view>
1
2
3
4
2
3
4
.fui-btn__box{
--fui-color-primary: blue;
}
1
2
3
2
3
定制多个组件的主题样式
与单个组件的定制方式类似，只需用一个如 fui-wrap 节点包裹住需要定制的组件，并将 CSS变量 设置在 fui-wrap 节点上。
定制全局主题样式
在全局写入 CSS 变量，即可对全局生效。 或者直接在App.vue文件中全局引入fui-theme.css文件。
page {
--fui-color-primary: blue;
--fui-color-success: green;
--fui-color-warning: orange;
--fui-color-danger: red;
--fui-color-purple: purple;
}
1
2
3
4
5
6
7
2
3
4
5
6
7