Feature/dark mode (#1082)

* feat: add dark mode

* chore: update common submodule

* chore: update common

* test: update snapshots

* test: update snapshots

* fix: update some demo ui in dark mode

* chore: fix tabs demo bg color in dark mode

---------

Co-authored-by: anlyyao <[email protected]>

site/mobile/app.vue

@@ -8,5 +8,18 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-export default defineComponent({});
+export default defineComponent({
+  mounted() {
+    this.initIframeMode();
+  },
+  methods: {
+    initIframeMode() {
+      const parent = window.parent;
+      if (!parent) return;
+
+      const mode = parent.document.documentElement.getAttribute('theme-mode') || 'light'
+      document.documentElement.setAttribute('theme-mode', mode);
+    }
+  }
+});
 </script>

site/mobile/main.ts

@@ -4,6 +4,9 @@ import header from './components/header.vue';
 import DemoBlock from './components/demo-block.vue';
 import router from './router';
 
+// import tdesign style
+import 'tdesign-mobile-vue/style/index.js';
+
 import TDesign from '@/index';
 import '@common/style/mobile/_reset.less';
 import '../styles/mobile/index.less';

site/styles/mobile/components.less

@@ -32,7 +32,7 @@
   }
 
   .tag-demo {
-    background-color: #fff;
+    background-color: var(--bg-color-demo, #fff);
     padding: 16px;
     display: flex;
 

site/styles/mobile/index.less

@@ -3,10 +3,62 @@
 @import './components.less';
 @import './demo.less';
 
+
+:root[theme-mode="dark"] {
+  --bg-color-demo: #181818;
+  --bg-color-demo-secondary: #2c2c2c;
+  --bg-color-scroll: #434343;
+
+  body{
+    background-color: var(--bg-color-demo);
+  }
+  .tdesign-demo-topnav {
+    background-color: var(--bg-color-demo);
+    &-title {
+      color: #fff;
+    }
+    &__back {
+      color: #fff;
+    }
+  }
+  .tdesign-demo-main .tdesign-mobile-demo {
+    background-color: var(--bg-color-demo);
+  }
+  .tdesign-demo-main .title,
+  .tdesign-demo-main .summary,
+  .tdesign-mobile-demo-block__title,
+  .tdesign-mobile-demo-block__summary {
+    color: #fff;
+  }
+}
+
+  html::-webkit-scrollbar, body::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+    background: transparent;
+  }
+
+  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
+    background: var(--bg-color-demo);
+  }
+
+  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 4px solid transparent;
+    background-clip: content-box;
+    background-color: var(--bg-color-scroll);
+  }
+  html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
+    width: 0;
+  }
+
+
 body {
   background-color: #F6F6F6;
+  color: var(--bg-color-tab);
 }
 
+
 #app {
   height: 100%;
   z-index: 0;
@@ -102,3 +154,5 @@ body {
     cursor: pointer;
   }
 }
+
+

site/web/app.vue

@@ -27,6 +27,32 @@ 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;
+}
+
+function changeIframeMode(mode){
+  const iframe = document.querySelector('iframe');
+  if (iframe?.contentWindow) {
+    iframe.contentWindow.document.documentElement.setAttribute('theme-mode', mode);
+  }
+}
+
 export default defineComponent({
   data() {
     return {
@@ -62,6 +88,7 @@ export default defineComponent({
     };
 
     this.initHistoryVersions();
+    watchHtmlMode(changeIframeMode)
   },
 
   watch: {

src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap

@@ -256,7 +256,6 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
 exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
-  style="background-color: rgb(255, 255, 255);"
 >
   <h1
     class="title"

src/action-sheet/demos/mobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo" :style="{ 'background-color': '#fff' }">
+  <div class="tdesign-mobile-demo">
     <h1 class="title">ActionSheet 动作面板</h1>
     <p class="summary">从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。</p>
     <tdesign-demo-block title="01 类型" summary="列表型">
@@ -27,6 +27,10 @@ import StatusVue from './status.vue';
 </script>
 
 <style lang="less">
+.tdesign-mobile-demo {
+  background-color: var(--bg-color-demo, #fff);
+}
+
 .action-sheet-grid-demo {
   > div {
     margin-top: 8px;

src/avatar/__test__/__snapshots__/demo.test.jsx.snap

@@ -1164,20 +1164,23 @@ exports[`Avatar > Avatar imageAvatarVue demo works fine 1`] = `
 exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
-  style="background-color: rgb(255, 255, 255);"
+  data-v-c7b11864=""
 >
   <h1
     class="title"
+    data-v-c7b11864=""
   >
     Avatar 头像
   </h1>
   <p
     class="summary"
+    data-v-c7b11864=""
   >
     用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
   </p>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -1199,6 +1202,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="avatar-demo"
+        data-v-c7b11864=""
       >
         <div
           class="t-avatar__wrapper avatar-example"
@@ -1340,6 +1344,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -1357,6 +1362,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="avatar-demo"
+        data-v-c7b11864=""
       >
         <div
           aria-label="字符头像"
@@ -1423,6 +1429,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -1440,6 +1447,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="avatar-demo"
+        data-v-c7b11864=""
       >
         <div
           class="t-avatar__wrapper avatar-example"
@@ -1527,6 +1535,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -1548,6 +1557,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="avatar-group-demo"
+        data-v-c7b11864=""
       >
         <div
           class="t-avatar-group t-avatar-group-offset-left-medium"
@@ -1902,6 +1912,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -1919,6 +1930,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="avatar-group-demo"
+        data-v-c7b11864=""
       >
         <div
           class="t-avatar-group t-avatar-group-offset-right-medium"
@@ -2268,6 +2280,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -2285,6 +2298,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="avatar-demo"
+        data-v-c7b11864=""
       >
         <div
           class="t-avatar__wrapper avatar-example"
@@ -2449,6 +2463,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-c7b11864=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -2470,6 +2485,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
       
       <div
         class="tdesign-demo-avatar"
+        data-v-c7b11864=""
       >
         <div
           class="avatar-demo"

src/avatar/demos/mobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo" style="background-color: #fff">
+  <div class="tdesign-mobile-demo">
     <h1 class="title">Avatar 头像</h1>
     <p class="summary">用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。</p>
     <tdesign-demo-block title="01 组件类型" summary="图片头像">
@@ -35,3 +35,8 @@ import action from './action.vue';
 import badgeAvatar from './badge-avatar.vue';
 import size from './size.vue';
 </script>
+<style scoped>
+.tdesign-mobile-demo {
+  background-color: var(--bg-color-demo, #fff);
+}
+</style>

src/back-top/__test__/__snapshots__/demo.test.jsx.snap

@@ -118,7 +118,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
   data-v-806aae90=""
-  style="background-color: rgb(255, 255, 255);"
 >
   <h1
     class="title"

src/back-top/demos/mobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo" :style="{ 'background-color': '#fff' }">
+  <div class="tdesign-mobile-demo">
     <h1 class="title">BackTop 回到顶部</h1>
     <p class="summary">当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部</p>
     <tdesign-demo-block title="01 类型" summary="圆型返回顶部">

src/badge/demos/base.vue

@@ -37,3 +37,8 @@ import { h } from 'vue';
 
 const IconNotification = () => h(NotificationIcon);
 </script>
+<style lang="less">
+.badge-demo {
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
+}
+</style>

src/checkbox/demos/horizontal.vue

@@ -20,6 +20,6 @@ const checkboxGroupChange = (value: any, context: { e: Event }) => {
   padding: 16px;
   display: flex;
   justify-content: space-between;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>

src/checkbox/demos/special.vue

@@ -29,7 +29,7 @@ const value1 = ref([1, 2]);
   border-radius: 6px;
   overflow: hidden;
   box-sizing: border-box;
-  border: 1.5px solid #fff;
+  border: 1.5px solid var(--bg-color-demo, #fff);
 }
 .card--active {
   border-color: #0052d9;

src/count-down/demos/base.vue

@@ -56,7 +56,7 @@ const time = 96 * 60 * 1000;
 
 <style lang="less">
 .demo-count-down-desc {
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
   font-size: 14px;
 }
 

src/dialog/demos/input.vue

@@ -57,7 +57,7 @@ const onCancel = () => {
 .t-input {
   margin-top: 16px;
   --td-input-vertical-padding: 12px;
-  --td-bg-color-container: #f3f3f3;
+  --td-bg-color-container: var(--td-bg-color-page, #f3f3f3);
   border-radius: 6px;
 }
 </style>

src/divider/demos/base.vue

@@ -22,15 +22,15 @@
 <style lang="less" scoped>
 .divider-demo__title {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
   padding: 8px 16px;
   line-height: 20px;
 }
 .divider-wrapper {
   display: flex;
   align-items: center;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   padding-left: 16px;
 }
 </style>