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]>
Tencent · Apr 19, 2024 · 7d8a22c · 7d8a22c
1 parent 3eb6b16
commit 7d8a22c
Show file tree

Hide file tree

Showing 236 changed files with 1,363 additions and 643 deletions.
diff --git a/example/app.json b/example/app.json
@@ -1,4 +1,5 @@
 {
+  "darkmode": true,
   "pages": [
     "pages/home/home",
     "pages/button/button",
@@ -101,14 +102,12 @@
   "usingComponents": {
     "t-demo": "./components/demo-block/index",
     "t-button": "tdesign-miniprogram/button/button",
-    "t-icon": "tdesign-miniprogram/icon/icon"
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
   },
   "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#f6f6f6",
-    "backgroundColor": "#f6f6f6",
     "navigationBarTitleText": "TDesign",
-    "navigationBarTextStyle": "black"
+    "navigationStyle": "custom"
   },
   "sitemapLocation": "sitemap.json"
 }
diff --git a/example/app.less b/example/app.less
@@ -1,25 +1,57 @@
 @import '../src/common/style/_variables.less';
-
+@import '../src/common/style/theme/_dark.less';
 page {
-  background: #f6f6f6; // 和设计师确认过，统一改成这个颜色
+  background-color: #f6f6f6;
+  --bg-color-demo-desc: #0009;
+  --bg-color-demo-title: #000000e6;
+  --bg-color-demo: #fff;
+  --bg-color-demo-border: #e7e7e7;
+  --bg-color-demo-secondary: #fff;
+  --td-navbar-bg-color: #f6f6f6;
+  --td-navbar-color: black;
+  --td-navbar-title-font-size: 26rpx;
+  --td-navbar-title-font-weight: 400;
+  --td-color-demo-notice-icon: rgba(0, 0, 0, 0.9);
+  --td-avatar-border-color: var(--bg-color-demo);
+  --td-progress-circle-inner-bg-color: var(--bg-color-demo);
+  --td-navbar-bg-color-example: @bg-color-container;
+  --td-navbar-color-example: @text-color-primary;
+  --td-grid-bg-color-example: @bg-color-container;
+  --td-grid-item-bg-color-example: @bg-color-container;
+  --td-input-border-color-example: rgba(220, 220, 220, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  page {
+    background: #181818 !important;
+    --bg-color-demo-title: #fff;
+    --bg-color-demo-desc: #fff;
+    --bg-color-demo: #181818;
+    --bg-color-demo-border: #383838;
+    --bg-color-demo-secondary: #2c2c2c;
+    --td-navbar-bg-color: #181818;
+    --td-navbar-color: white;
+    --td-color-demo-notice-icon: rgba(255, 255, 255, 0.9);
+    --td-grid-bg-color-example: transparent;
+    --td-grid-item-bg-color-example: transparent;
+    --td-input-border-color-example: #5e5e5e;
+  }
 }
 
 .demo {
   padding-bottom: 56rpx;
-  // padding-bottom: env(safe-area-inset-bottom, 28px); 小程序真机渲染有bug
-  // padding-bottom: constant(safe-area-inset-bottom, 28px);
 
   &-title {
     font-size: 48rpx;
     font-weight: 700;
     line-height: 64rpx;
     margin: 48rpx 32rpx 0;
-    color: @font-gray-1;
+    color: var(--bg-color-demo-title);
   }
 
   &-desc {
     font-size: 28rpx;
-    color: @font-gray-2;
+    color: var(--bg-color-demo-desc);
     margin: 16rpx 32rpx 0;
     line-height: 44rpx;
   }

diff --git a/example/assets/TDesign-logo_dark.png b/example/assets/TDesign-logo_dark.png
diff --git a/example/assets/TDesign-logo_light.png b/example/assets/TDesign-logo_light.png
diff --git a/example/assets/[email protected] b/example/assets/[email protected]
diff --git a/example/components/demo-block/index.less b/example/components/demo-block/index.less
@@ -1,10 +1,10 @@
-@import '../../../src/common/style/_variables.less';
+@import '../../../src/common/index.less';
 
 .demo-block {
   margin: @spacer-4 0 0;
 
   &__header {
-    color: #000;
+    color: var(--bg-color-demo-title);
     margin: 0 @spacer-2;
 
     &-title {
@@ -17,7 +17,7 @@
       margin-top: @spacer;
       font-size: @font-size-base;
       white-space: pre-line;
-      color: @font-gray-2;
+      color: var(--bg-color-demo-desc);
       line-height: 22px;
     }
   }

diff --git a/example/components/pull-down-list/index.less b/example/components/pull-down-list/index.less
@@ -1,7 +1,9 @@
+@import '../../../src/common/style/_variables.less';
+@import '../../../src/common/style/theme/_dark.less';
 .pullDownList {
   width: 100%;
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: @bg-color-container;
   border-radius: 8rpx;
   margin-bottom: 12rpx * 2;
   overflow: hidden;
@@ -14,7 +16,7 @@
     padding: 0 16rpx * 2;
     font-size: 16rpx * 2;
     line-height: 24rpx * 2;
-    color: #333;
+    color: @text-color-secondary;
   }
 
   .name,
@@ -41,7 +43,7 @@
 
     .child {
       box-sizing: border-box;
-      border-bottom: 1rpx solid #e5e5e5;
+      border-bottom: 1rpx solid @component-stroke;
       height: 56rpx * 2;
       display: flex;
       justify-content: space-between;
@@ -50,6 +52,7 @@
       margin-right: 16rpx * 2;
       font-size: 16rpx * 2;
       opacity: 0.9;
+      color: @text-color-primary;
 
       &:last-of-type {
         border-bottom-color: transparent;

diff --git a/example/components/pull-down-list/index.ts b/example/components/pull-down-list/index.ts
@@ -1,5 +1,4 @@
 const itemHeight = 56 * 2;
-
 Component({
   data: {
     childBoxHeight: 0,

diff --git a/example/components/pull-down-list/index.wxml b/example/components/pull-down-list/index.wxml
@@ -6,7 +6,7 @@
   <view class="childBox" style="height: {{ childBoxHeight }}rpx" aria-hidden="{{childBoxHeight ? '' : true}}">
     <view class="child" wx:for="{{childArr}}" wx:key="name" data-item="{{item}}" aria-role="button" bind:tap="tapChild">
       {{ item.name }} {{ item.label }}
-      <t-icon name="chevron-right" color="#bbb" aria-hidden />
+      <t-icon name="chevron-right" color="var(--td-text-color-placeholder)" aria-hidden />
     </view>
   </view>
 </view>
diff --git a/example/pages/home/home.json b/example/pages/home/home.json
@@ -4,8 +4,5 @@
     "t-footer": "tdesign-miniprogram/footer/footer",
     "trd-privacy": "/components/trd-privacy/privacy"
   },
-  "navigationBarTitleText": "TDesign UI",
-  "navigationBarBackgroundColor": "#f6f6f6",
-  "navigationBarTextStyle": "black",
-  "backgroundColor": "#f6f6f6"
+  "navigationBarTitleText": "TDesign UI"
 }
diff --git a/example/pages/home/home.less b/example/pages/home/home.less
@@ -1,6 +1,4 @@
-page {
-  background-color: #f6f6f6;
-}
+@import '../../../src/common/style/_variables.less';
 
 .main {
   width: 100%;
@@ -38,7 +36,7 @@ page {
 }
 
 .desc {
-  color: rgba(0, 0, 0, 0.4);
+  color: @text-color-placeholder;
   margin-top: 16rpx * 2;
   font-size: 14rpx * 2;
   font-weight: 400;

diff --git a/example/pages/home/home.ts b/example/pages/home/home.ts
@@ -4,6 +4,7 @@ Page({
   data: {
     list,
     currentYear: new Date().getFullYear(),
+    isDarkMode: false,
   },
   onLoad(options) {
     const { path, q } = options;
@@ -20,6 +21,7 @@ Page({
     }
 
     this.trdPrivacy = this.selectComponent('#trdPrivacy');
+    this.setData({ isDarkMode: wx.getSystemInfoSync().theme === 'dark' });
   },
 
   showPrivacyWin() {

diff --git a/example/pages/home/home.wxml b/example/pages/home/home.wxml
@@ -1,6 +1,12 @@
+<t-navbar title="TDesign UI" />
 <view class="main">
   <view class="title-wrap">
-    <image class="title-icon" mode="aspectFit" src="/assets/[email protected]" aria-label="TDesign Logo" />
+    <image
+      class="title-icon"
+      mode="aspectFit"
+      src="/assets/{{isDarkMode ? 'TDesign-logo_dark' : 'TDesign-logo_light'}}.png"
+      aria-label="TDesign Logo"
+    />
   </view>
   <view class="desc"> TDesign 适配微信小程序的组件库 </view>
   <pull-down-list

diff --git a/site/app.vue b/site/app.vue
@@ -11,6 +11,7 @@
 
 <script>
 import siteConfig from './site.config';
+import { changeThemeMode } from './theme/dark';
 
 import { defineComponent } from 'vue';
 
@@ -42,6 +43,25 @@ const docsMap = {
   en: sortDocs(enDocs),
 };
 
+function watchHtmlMode(callback = () => {}) {
+  const targetNode = document.documentElement;
+  const config = { attributes: true };
+
+  const observerCallback = (mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.attributeName === 'theme-mode') {
+        const themeMode = mutation.target.getAttribute('theme-mode') || 'light';
+        if (themeMode) callback(themeMode);
+      }
+    }
+  };
+
+  const observer = new MutationObserver(observerCallback);
+  observer.observe(targetNode, config);
+
+  return observer;
+}
+
 export default defineComponent({
   data() {
     return {
@@ -68,6 +88,7 @@ export default defineComponent({
       window.scrollTo(0, 0);
     };
     this.$refs.tdDocSearch.docsearchInfo = { indexName: 'tdesign_doc_miniprogram' };
+    watchHtmlMode(changeThemeMode);
   },
 
   watch: {

diff --git a/site/plugin-tdoc/component.vue b/site/plugin-tdoc/component.vue
@@ -15,7 +15,10 @@
             frameborder="0"
             width="100%"
             height="100%"
-            style="box-sizing: border-box; border-radius: 0 0 6px 6px; overflow: hidden; border-top: 8px solid #f8f8f8"
+            class="mobile-iframe"
+            style="box-sizing: border-box; border-radius: 0 0 6px 6px; overflow: hidden"
+            @load="onIframeLoaded"
+            ref="parentIframe"
           ></iframe>
         </td-doc-phone>
         <td-contributors platform="miniprogram" framework="wx" :component-name="name"></td-contributors>
@@ -36,6 +39,7 @@ import { defineComponent } from 'vue';
 import Prismjs from 'prismjs';
 import 'prismjs/components/prism-bash.js';
 import 'prismjs/components/prism-json.js';
+import { changeThemeMode, watchExampleRouterChange } from '../theme/dark';
 
 import QrCode from '@components/qrcode.vue';
 
@@ -87,11 +91,28 @@ export default defineComponent({
     this.$emit('loaded', () => {
       tdDocContent.pageStatus = 'show';
     });
+    if (this.$refs.parentIframe && this.$refs.parentIframe.onload) {
+      this.$refs.parentIframe.onload = () => {
+        watchExampleRouterChange(this.$refs.parentIframe);
+      };
+    }
+  },
+
+  methods: {
+    onIframeLoaded() {
+      changeThemeMode();
+    },
   },
 });
 </script>
 
 <style lang="less">
+:root[theme-mode='dark'] {
+  --mobile-border-color: #181818;
+}
+.mobile-iframe {
+  border-top: 8px solid var(--mobile-border-color, #f8f8f8);
+}
 .td-doc {
   // &-main {
   //   position: relative;