Skip to content

Commit 7d8a22c

Browse files
zuiaiwanqiananlyyaoWen1kang
authored
TDesign 微信小程序组件库提供原生深色模式适配 (#2636)
* feat: 暗黑模式配置完成 * feat: 修改button组件的颜色变量 * fix: divider颜色变量修改 * fix: link适配深色模式 * feat: 部分组件完成深色模式适配 * feat: 导航模块下组件完成深色模式适配 * feat: 完成输入类型组件深色模式适配 * feat: 完成数据展示类别深色模式适配 * feat: 反馈类别组件适应深色模式 * feat: 修改示例导航栏为自定义导航栏 * feat: 删除app.json无用navbar配置 * feat: 修改grid的border示例 * feat: 文档深色模式预览完成 * feat: 优化文档深色模式代码 * fix: 修复自定义导航栏的样式bug * feat: 修复navbar在navbar示例中的bug * fix: 优化代码 * fix: 调整dark引用位置 * fix: 修改mobile小白条显示 * fix: 修复样式bug至sidebar * fix: 修复深色模式问题 * feat: 修改无承载token组件颜色 * fix: 修改tabbar自定义样式 * fix: dark的token全部提到app.less * fix: 修复mac暗黑模式不行的问题 * feat: 监听预览器路由跳转更新dark * fix: 修复mr问题 * fix: 修改mr问题 * fix: 修复自定义导航栏导致的交互问题 * fix: 删除globalData，解决side-bar可滑动问题 * test: update snapshots * fix: dark mode style bug * feat: 解决官网路由切换问题 * chore: restore vscode setting.json --------- Co-authored-by: anlyyao <[email protected]> Co-authored-by: wenkang <[email protected]>
1 parent 3eb6b16 commit 7d8a22c

File tree

236 files changed

+1363
-643
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

236 files changed

+1363
-643
lines changed

‎example/app.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"darkmode": true,
23
"pages": [
34
"pages/home/home",
45
"pages/button/button",
@@ -101,14 +102,12 @@
101102
"usingComponents": {
102103
"t-demo": "./components/demo-block/index",
103104
"t-button": "tdesign-miniprogram/button/button",
104-
"t-icon": "tdesign-miniprogram/icon/icon"
105+
"t-icon": "tdesign-miniprogram/icon/icon",
106+
"t-navbar": "tdesign-miniprogram/navbar/navbar"
105107
},
106108
"window": {
107-
"backgroundTextStyle": "light",
108-
"navigationBarBackgroundColor": "#f6f6f6",
109-
"backgroundColor": "#f6f6f6",
110109
"navigationBarTitleText": "TDesign",
111-
"navigationBarTextStyle": "black"
110+
"navigationStyle": "custom"
112111
},
113112
"sitemapLocation": "sitemap.json"
114113
}

‎example/app.less‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,57 @@
11
@import '../src/common/style/_variables.less';
2-
2+
@import '../src/common/style/theme/_dark.less';
33
page {
4-
background: #f6f6f6; // 和设计师确认过，统一改成这个颜色
4+
background-color: #f6f6f6;
5+
--bg-color-demo-desc: #0009;
6+
--bg-color-demo-title: #000000e6;
7+
--bg-color-demo: #fff;
8+
--bg-color-demo-border: #e7e7e7;
9+
--bg-color-demo-secondary: #fff;
10+
--td-navbar-bg-color: #f6f6f6;
11+
--td-navbar-color: black;
12+
--td-navbar-title-font-size: 26rpx;
13+
--td-navbar-title-font-weight: 400;
14+
--td-color-demo-notice-icon: rgba(0, 0, 0, 0.9);
15+
--td-avatar-border-color: var(--bg-color-demo);
16+
--td-progress-circle-inner-bg-color: var(--bg-color-demo);
17+
--td-navbar-bg-color-example: @bg-color-container;
18+
--td-navbar-color-example: @text-color-primary;
19+
--td-grid-bg-color-example: @bg-color-container;
20+
--td-grid-item-bg-color-example: @bg-color-container;
21+
--td-input-border-color-example: rgba(220, 220, 220, 1);
22+
}
23+
24+
@media (prefers-color-scheme: dark) {
25+
page {
26+
background: #181818 !important;
27+
--bg-color-demo-title: #fff;
28+
--bg-color-demo-desc: #fff;
29+
--bg-color-demo: #181818;
30+
--bg-color-demo-border: #383838;
31+
--bg-color-demo-secondary: #2c2c2c;
32+
--td-navbar-bg-color: #181818;
33+
--td-navbar-color: white;
34+
--td-color-demo-notice-icon: rgba(255, 255, 255, 0.9);
35+
--td-grid-bg-color-example: transparent;
36+
--td-grid-item-bg-color-example: transparent;
37+
--td-input-border-color-example: #5e5e5e;
38+
}
539
}
640

741
.demo {
842
padding-bottom: 56rpx;
9-
// padding-bottom: env(safe-area-inset-bottom, 28px); 小程序真机渲染有bug
10-
// padding-bottom: constant(safe-area-inset-bottom, 28px);
1143

1244
&-title {
1345
font-size: 48rpx;
1446
font-weight: 700;
1547
line-height: 64rpx;
1648
margin: 48rpx 32rpx 0;
17-
color: @font-gray-1;
49+
color: var(--bg-color-demo-title);
1850
}
1951

2052
&-desc {
2153
font-size: 28rpx;
22-
color: @font-gray-2;
54+
color: var(--bg-color-demo-desc);
2355
margin: 16rpx 32rpx 0;
2456
line-height: 44rpx;
2557
}

‎example/assets/TDesign-logo_dark.png‎

2.87 KB
Loading

‎example/assets/TDesign-logo_light.png‎

2.85 KB
Loading

‎example/assets/[email protected]‎

-10.6 KB
Binary file not shown.

‎example/components/demo-block/index.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@import '../../../src/common/style/_variables.less';
1+
@import '../../../src/common/index.less';
22

33
.demo-block {
44
margin: @spacer-4 0 0;
55

66
&__header {
7-
color: #000;
7+
color: var(--bg-color-demo-title);
88
margin: 0 @spacer-2;
99

1010
&-title {
@@ -17,7 +17,7 @@
1717
margin-top: @spacer;
1818
font-size: @font-size-base;
1919
white-space: pre-line;
20-
color: @font-gray-2;
20+
color: var(--bg-color-demo-desc);
2121
line-height: 22px;
2222
}
2323
}

‎example/components/pull-down-list/index.less‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@import '../../../src/common/style/_variables.less';
2+
@import '../../../src/common/style/theme/_dark.less';
13
.pullDownList {
24
width: 100%;
35
box-sizing: border-box;
4-
background-color: #fff;
6+
background-color: @bg-color-container;
57
border-radius: 8rpx;
68
margin-bottom: 12rpx * 2;
79
overflow: hidden;
@@ -14,7 +16,7 @@
1416
padding: 0 16rpx * 2;
1517
font-size: 16rpx * 2;
1618
line-height: 24rpx * 2;
17-
color: #333;
19+
color: @text-color-secondary;
1820
}
1921

2022
.name,
@@ -41,7 +43,7 @@
4143

4244
.child {
4345
box-sizing: border-box;
44-
border-bottom: 1rpx solid #e5e5e5;
46+
border-bottom: 1rpx solid @component-stroke;
4547
height: 56rpx * 2;
4648
display: flex;
4749
justify-content: space-between;
@@ -50,6 +52,7 @@
5052
margin-right: 16rpx * 2;
5153
font-size: 16rpx * 2;
5254
opacity: 0.9;
55+
color: @text-color-primary;
5356

5457
&:last-of-type {
5558
border-bottom-color: transparent;

‎example/components/pull-down-list/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
const itemHeight = 56 * 2;
2-
32
Component({
43
data: {
54
childBoxHeight: 0,

‎example/components/pull-down-list/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<view class="childBox" style="height: {{ childBoxHeight }}rpx" aria-hidden="{{childBoxHeight ? '' : true}}">
77
<view class="child" wx:for="{{childArr}}" wx:key="name" data-item="{{item}}" aria-role="button" bind:tap="tapChild">
88
{{ item.name }} {{ item.label }}
9-
<t-icon name="chevron-right" color="#bbb" aria-hidden />
9+
<t-icon name="chevron-right" color="var(--td-text-color-placeholder)" aria-hidden />
1010
</view>
1111
</view>
1212
</view>

‎example/pages/home/home.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,5 @@
44
"t-footer": "tdesign-miniprogram/footer/footer",
55
"trd-privacy": "/components/trd-privacy/privacy"
66
},
7-
"navigationBarTitleText": "TDesign UI",
8-
"navigationBarBackgroundColor": "#f6f6f6",
9-
"navigationBarTextStyle": "black",
10-
"backgroundColor": "#f6f6f6"
7+
"navigationBarTitleText": "TDesign UI"
118
}

0 commit comments

Comments
 (0)