Skip to content

Commit 80bc6b3

Browse files
xiaoyatongxiaoyatong
authored
fix: dark mode for v15 (#2883)
* fix: dark * fix: dark mode
1 parent 83cee35 commit 80bc6b3

File tree

8 files changed

+70
-103
lines changed

8 files changed

+70
-103
lines changed

‎src/packages/navbar/demo.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@
55
}
66
}
77
.demo {
8-
.nut-tabs-titles {
9-
background: transparent;
10-
}
11-
128
.nut-tabpane {
139
display: none;
1410
}

‎src/packages/navbar/demos/h5/demo3.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Demo3 = () => {
3030
}}
3131
style={{
3232
'--nutui-tabs-titles-gap': 0,
33+
background: 'transparent',
3334
}}
3435
>
3536
<TabPane title="Tab 1"> Tab 1 </TabPane>

‎src/packages/navbar/demos/taro/demo3.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ const Demo3 = () => {
3939
onChange={(paneKey) => {
4040
setTab1value(paneKey)
4141
}}
42+
style={{
43+
background: 'transparent',
44+
}}
4245
>
4346
<TabPane title="Tab 1"> Tab 1 </TabPane>
4447
<TabPane title="Tab 2"> Tab 2 </TabPane>

‎src/packages/tabs/tabs.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153

154154
&-card {
155155
padding: 0;
156-
background-color: $color-default-light;
156+
// background-color: $color-default-light;
157157

158158
.nut-tabs-titles-item {
159159
padding: 0;

‎src/sites/mobile/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const darkTheme = {
4949
nutuiGray7: '#e6e6e6',
5050
nutuiBlack1: 'rgba(255, 255, 255, 0)',
5151
nutuiBlack2: 'rgba(20, 20, 20, 0.2)',
52-
nutuiBlack3: 'rgba(20, 20, 20, 0.06)',
52+
nutuiBlack3: 'rgba(255, 255, 255, 0.06)',
5353
nutuiBlack4: 'rgba(20, 20, 20, 0.1)',
5454
nutuiBlack5: 'rgba(20, 20, 20, 0.2)',
5555
nutuiBlack6: 'rgba(20, 20, 20, 0.3)',

‎src/styles/theme-dark.scss

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ page {
3737
--nutui-color-primary-specialdisabled: var(--nutui-red-3);
3838

3939
// service color
40-
--nutui-golden-1: #fff2e0;
41-
--nutui-golden-2: #ffd4a3;
42-
--nutui-golden-3: #cc8241; // todo
43-
--nutui-golden-4: #994d00; // todo
40+
--nutui-golden-1: #292725;
41+
--nutui-golden-2: #4d4134;
42+
--nutui-golden-3: #c59463;
43+
--nutui-golden-4: #d18e54;
4444

4545
--nutui-golden-stop-1: #fff9f0;
4646
--nutui-golden-stop-2: #ffe3c2;
@@ -54,38 +54,38 @@ page {
5454
--nutui-color-service-text: var(--nutui-golden-3);
5555

5656
// success color
57-
--nutui-green-1: #ebfbeb;
58-
--nutui-green-2: #00d900;
59-
--nutui-green-3: #2aa32a;
57+
--nutui-green-1: #1f2920;
58+
--nutui-green-2: #32c241;
59+
--nutui-green-3: #12b222;
6060

6161
// success color 语义化
6262
--nutui-color-success: var(--nutui-green-2); // 深背景
6363
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
6464
--nutui-color-success-pressed: var(--nutui-green-3); // 文字
6565

6666
// danger color
67-
--nutui-red-1: #ffebef;
68-
--nutui-red-2: #ff0f23;
69-
--nutui-red-3: #ffadbe;
67+
--nutui-red-1: #2e2526;
68+
--nutui-red-2: #ff3344;
69+
--nutui-red-3: #ff3344;
7070
--nutui-red-6: #ff3b3b;
7171

7272
// danger color 语义化
7373
--nutui-color-danger: var(--nutui-red-2); // 背景或文字
7474
--nutui-color-danger-light: var(--nutui-red-1); // 背景
7575

7676
// warning color
77-
--nutui-yellow-1: #fff5cc;
78-
--nutui-yellow-2: #ffbf00;
79-
--nutui-yellow-3: #c47600;
77+
--nutui-yellow-1: #29271f;
78+
--nutui-yellow-2: #faaf00;
79+
--nutui-yellow-3: #c47600; //todo
8080

8181
// warning color 语义化
8282
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
8383
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
8484
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
8585

8686
// info color
87-
--nutui-blue-1: #e5f5ff;
88-
--nutui-blue-2: #0073ff;
87+
--nutui-blue-1: #23292e;
88+
--nutui-blue-2: #3385ff;
8989

9090
// info color 语义化
9191
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
@@ -116,10 +116,10 @@ page {
116116
--nutui-black-1: rgba(255, 255, 255, 0);
117117
// 蒙层色
118118
// 容错蒙层
119-
--nutui-black-2: rgba(0, 0, 0, 0.2);
119+
--nutui-black-2: rgba(0, 0, 0, 0.1);
120120
// 线条色
121121
// 间隔线/容错线，用于结构或信息分割
122-
--nutui-black-3: rgba(20, 20, 20, 0.06);
122+
--nutui-black-3: rgba(255, 255, 255, 0.06);
123123
--nutui-black-4: rgba(20, 20, 20, 0.1);
124124
--nutui-black-5: rgba(20, 20, 20, 0.2);
125125
--nutui-black-6: rgba(20, 20, 20, 0.3);

‎src/styles/theme-default.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ page {
3838
// service color
3939
--nutui-golden-1: #fff2e0;
4040
--nutui-golden-2: #ffd4a3;
41-
--nutui-golden-3: #cc8241; // todo
42-
--nutui-golden-4: #994d00; // todo
41+
--nutui-golden-3: #cc8241;
42+
--nutui-golden-4: #994d00;
4343

4444
--nutui-golden-stop-1: #fff9f0;
4545
--nutui-golden-stop-2: #ffe3c2;
@@ -99,7 +99,7 @@ page {
9999
// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
100100
--nutui-gray-2: #f7f8fc;
101101
// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
102-
--nutui-gray-3: #f5f6fa;
102+
--nutui-gray-3: #f2f3f5;
103103
// 文字色
104104
// 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
105105
--nutui-gray-4: #c2c4cc;

‎src/styles/variables.scss

Lines changed: 44 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
11
// ----------------------------------------------------
22
// 主色调 // done
3-
$color-primary: var(--nutui-color-primary, #ff0f23) !default;
3+
$color-primary: var(--nutui-brand-6) !default;
44
$color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default;
55
$color-primary-stop-2: var(--nutui-color-primary-stop-2, #ff0f23) !default;
66
$color-primary-pressed: var(--nutui-color-primary-pressed, #e53029) !default;
77
$color-primary-disabled: var(--nutui-color-primary-disabled, #c2c4cc) !default;
8-
$color-primary-disabled-special: var(
9-
--nutui-color-primary-disabled-special,
10-
#ffadbe
11-
) !default;
12-
$color-primary-light-pressed: var(
13-
--nutui-color-primary-light-pressed,
14-
#ffebf1
15-
) !default;
8+
$color-primary-disabled-special: var(--nutui-brand-3) !default;
9+
$color-primary-light-pressed: var(--nutui-brand-1) !default;
1610
$color-primary-gradient-1: linear-gradient(
1711
135deg,
1812
$color-primary-stop-1 0%,
1913
$color-primary-stop-2 100%
2014
) !default;
21-
$color-primary-icon: var(--nutui-red-6, #ff3333) !default;
22-
$color-primary-icon-disabled: var(--nutui-gray-8, #dadce0) !default;
23-
$color-primary-specialdisabled: var(
24-
--nutui-color-primary-specialdisabled,
25-
#ffadbe
26-
) !default;
15+
$color-primary-icon: var(--nutui-red-6) !default;
16+
$color-primary-icon-disabled: var(--nutui-gray-8) !default;
17+
$color-primary-specialdisabled: var(--nutui-red-3) !default;
2718

2819
// 默认色
2920
$color-default: var(--nutui-color-default) !default;
@@ -43,96 +34,66 @@ $color-info-background: var(
4334
$color-info-text: var(--nutui-color-info, #0073ff) !default; // done
4435

4536
// 成功色
46-
$color-success: var(--nutui-color-success, #00d900) !default; // done
47-
$color-success-pressed: var(
48-
--nutui-color-success-pressed,
49-
#2aa32a
50-
) !default; // done
37+
$color-success: var(--nutui-green-2) !default; // done
38+
$color-success-pressed: var(--nutui-green-3) !default; // done
5139
$color-success-disabled: var(--nutui-color-success-disabled, #b2f0ae) !default;
52-
$color-success-light: var(
53-
--nutui-color-success-light,
54-
#ebfbeb
55-
) !default; // done
56-
$color-success-background: var(
57-
--nutui-color-success-background,
58-
#00d900
59-
) !default; // done
60-
$color-success-text: var(
61-
--nutui-color-success-pressed,
62-
#2aa32a
63-
) !default; // done
40+
$color-success-light: var(--nutui-green-1) !default; // done
41+
$color-success-background: var(--nutui-green-2) !default; // done
42+
$color-success-text: var(--nutui-green-3) !default; // done
6443

6544
// 警告色
66-
$color-warning: var(--nutui-color-warning, #ffbf00) !default; // done
67-
$color-warning-pressed: var(
68-
--nutui-color-warning-pressed,
69-
#c47600
70-
) !default; // done
45+
$color-warning: var(--nutui-yellow-2) !default; // done
46+
$color-warning-pressed: var(--nutui-yellow-3) !default; // done
7147
$color-warning-disabled: var(--nutui-color-warning-disabled, #fdd3b9) !default;
72-
$color-warning-light: var(
73-
--nutui-color-warning-light,
74-
#fff5cc
75-
) !default; // done
76-
$color-warning-background: var(
77-
--nutui-color-warning-background,
78-
#ffbf00
79-
) !default; // done
80-
$color-warning-text: var(
81-
--nutui-color-warning-pressed,
82-
#c47600
83-
) !default; // done
48+
$color-warning-light: var(--nutui-yellow-1) !default; // done
49+
$color-warning-background: var(--nutui-yellow-2) !default; // done
50+
$color-warning-text: var(--nutui-yellow-3) !default; // done
8451

8552
// 危险色
86-
$color-danger: var(--nutui-color-danger, #ff0f23) !default; //done
53+
$color-danger: var(--nutui-red-2) !default; //done
8754
$color-danger-pressed: var(--nutui-color-danger-pressed) !default;
8855
$color-danger-disabled: var(
8956
--nutui-color-danger-disabled,
9057
$color-primary-disabled-special
9158
) !default;
92-
$color-danger-light: var(--nutui-color-danger-light, #ffebef) !default; //done
59+
$color-danger-light: var(--nutui-red-1) !default; //done
9360
$color-danger-background: var(--nutui-color-danger-background) !default; //done
94-
$color-danger-text: var(--nutui-color-danger, #ff0f23) !default; //done
61+
$color-danger-text: var(--nutui-red-2) !default; //done
9562

9663
// 背景色
97-
$color-background: var(--nutui-color-background, #f5f6fa) !default; //done
64+
$color-background: var(--nutui-gray-3) !default; //done
9865
// 卡片背景色
99-
$color-background-overlay: var(
100-
--nutui-color-background-overlay,
101-
#ffffff
102-
) !default;
66+
$color-background-overlay: var(--nutui-gray-1) !default;
10367
// 卡片内嵌背景色
10468
$color-background-sunken: var(
10569
--nutui-color-background-sunken,
106-
#f7f8fc
70+
var(--nutui-gray-2)
10771
) !default;
10872

10973
// 蒙层颜色
11074
// 页面全局蒙层
111-
$color-mask: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)) !default;
75+
$color-mask: var(--nutui-black-10) !default;
11276
// 局部蒙层
113-
$color-mask-part: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)) !default;
77+
$color-mask-part: var(--nutui-black-7) !default;
11478
// 容错蒙层
115-
$color-mask-fault-toleran: var(
116-
--nutui-color-mask-fault-toleran,
117-
rgba(0, 0, 0, 0.02)
118-
) !default;
79+
$color-mask-fault-toleran: var(--nutui-black-2) !default;
11980

12081
// 边框色
121-
$color-border: var(--nutui-color-border, rgba(0, 0, 0, 0.06)) !default;
122-
$color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
82+
$color-border: var(--nutui-black-3) !default;
83+
$color-border-disabled: var(--nutui-gray-4) !default;
12384

12485
// 文本色
125-
$color-title: var(--nutui-color-title, #1a1a1a) !default;
126-
$color-text: var(--nutui-color-text, #505259) !default;
127-
$color-text-help: var(--nutui-color-text-help, #888b94) !default;
128-
$color-text-disabled: var(--nutui-color-text-disabled, #c2c4cc) !default;
86+
$color-title: var(--nutui-gray-7) !default;
87+
$color-text: var(--nutui-gray-6) !default;
88+
$color-text-help: var(--nutui-gray-5) !default;
89+
$color-text-disabled: var(--nutui-gray-4) !default;
12990
$color-text-dark: var(--nutui-white-12) !default;
130-
$color-text-link: var(--nutui-color-info, #0073ff) !default;
91+
$color-text-link: var(--nutui-blue-2) !default;
13192

13293
// 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
133-
$color-primary-text: var(--nutui-color-primary-text, #ffffff) !default;
94+
$color-primary-text: #ffffff !default;
13495
$white: #ffffff !default;
135-
$black: $color-title !default;
96+
$black: #000000 !default;
13697

13798
// ---- Font Family ----
13899
$font-family:
@@ -734,7 +695,7 @@ $numberkeyboard-header-close-background-color: var(
734695
) !default;
735696
$numberkeyboard-key-background-color: var(
736697
--nutui-numberkeyboard-key-background-color,
737-
#fff
698+
$color-background-overlay
738699
) !default;
739700
$numberkeyboard-key-active-background-color: var(
740701
--nutui-numberkeyboard-key-active-background-color,
@@ -1828,7 +1789,10 @@ $tabs-tabpane-backgroundColor: var(
18281789
) !default;
18291790
// indicator（✅）
18301791
$indicator-color: var(--nutui-indicator-color, $color-primary) !default;
1831-
$indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default;
1792+
$indicator-dot-color: var(
1793+
--nutui-indicator-dot-color,
1794+
$color-text-disabled
1795+
) !default;
18321796
$indicator-dot-size: var(--nutui-indicator-dot-size, 4px) !default;
18331797
$indicator-dot-active-size: var(
18341798
--nutui-indicator-dot-active-size,
@@ -2005,7 +1969,10 @@ $empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
20051969
$empty-image-size: var(--nutui-empty-image-size, 160px) !default;
20061970
$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default;
20071971
$empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
2008-
$empty-background-color: var(--nutui-empty-background-color, #fff) !default;
1972+
$empty-background-color: var(
1973+
--nutui-empty-background-color,
1974+
$color-background-overlay
1975+
) !default;
20091976
$empty-title-margin-bottom: var(
20101977
--nutui-empty-title-margin-bottom,
20111978
12px
@@ -2134,7 +2101,7 @@ $grid-item-content-padding: var(
21342101
) !default;
21352102
$grid-item-content-bg-color: var(
21362103
--nutui-grid-item-content-bg-color,
2137-
$white
2104+
var(--nutui-gray-1)
21382105
) !default;
21392106
$grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default;
21402107
$grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default;

0 commit comments

Comments
 (0)