From 3453279fcd9f3d2b9cde9e8ef522980376f67625 Mon Sep 17 00:00:00 2001
From: Mike <1576271227@qq.com>
Date: Thu, 14 Sep 2023 11:35:35 +0800
Subject: [PATCH] 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 <anly_yaw@163.com>
---
 site/mobile/app.vue                           | 15 +++++-
 site/mobile/main.ts                           |  3 ++
 site/styles/mobile/components.less            |  2 +-
 site/styles/mobile/index.less                 | 54 +++++++++++++++++++
 site/web/app.vue                              | 27 ++++++++++
 src/_common                                   |  2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  1 -
 src/action-sheet/demos/mobile.vue             |  6 ++-
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 ++++++-
 src/avatar/demos/mobile.vue                   |  7 ++-
 .../__test__/__snapshots__/demo.test.jsx.snap |  1 -
 src/back-top/demos/mobile.vue                 |  2 +-
 src/badge/demos/base.vue                      |  5 ++
 src/checkbox/demos/horizontal.vue             |  2 +-
 src/checkbox/demos/special.vue                |  2 +-
 src/count-down/demos/base.vue                 |  2 +-
 src/dialog/demos/input.vue                    |  2 +-
 src/divider/demos/base.vue                    |  4 +-
 src/divider/demos/theme.vue                   |  2 +-
 src/dropdown-menu/demos/customized.vue        |  1 +
 src/form/demos/horizontal.vue                 |  2 +-
 src/form/demos/mobile.vue                     |  2 +-
 src/form/demos/vertical.vue                   |  2 +-
 src/icon/demos/mobile.vue                     |  6 +++
 src/image/demos/base.vue                      |  4 +-
 src/image/demos/position.vue                  |  4 +-
 src/image/demos/shape.vue                     |  4 +-
 src/image/demos/status.vue                    |  4 +-
 src/input/demos/bordered.vue                  |  4 +-
 src/link/demos/base.vue                       |  2 +-
 src/link/demos/linkSize.vue                   |  2 +-
 src/link/demos/prefix.vue                     |  2 +-
 src/link/demos/status.vue                     |  2 +-
 src/link/demos/suffix.vue                     |  2 +-
 src/link/demos/theme.vue                      |  2 +-
 src/link/demos/underline.vue                  |  2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  6 +--
 src/list/demos/mobile.vue                     | 10 ++--
 src/navbar/demos/size.vue                     |  4 +-
 src/notice-bar/demos/custom.vue               |  6 +--
 src/notice-bar/demos/mobile.vue               |  2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  4 +-
 src/overlay/demos/base.vue                    |  2 +-
 src/overlay/demos/mobile.vue                  |  2 +-
 src/popover/demos/mobile.vue                  |  2 +-
 src/popover/demos/placement.vue               |  2 +-
 src/popover/demos/type.vue                    |  2 +-
 src/popup/demos/mobile.vue                    |  2 +-
 src/popup/demos/with-title.vue                |  3 +-
 src/radio/demos/horizontal.vue                |  4 +-
 src/rate/demos/action.vue                     |  3 +-
 src/rate/demos/base.vue                       |  3 +-
 src/rate/demos/color.vue                      |  3 +-
 src/rate/demos/count.vue                      |  3 +-
 src/rate/demos/custom.vue                     |  3 +-
 src/rate/demos/show-text.vue                  |  3 +-
 src/rate/demos/size.vue                       |  3 +-
 src/rate/demos/special.vue                    |  3 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  2 +-
 src/result/demos/mobile.vue                   |  8 +--
 src/search/demos/action.vue                   |  2 +-
 src/search/demos/base.vue                     |  2 +-
 src/search/demos/shape.vue                    |  2 +-
 src/side-bar/demos/base.vue                   |  2 +-
 src/side-bar/demos/custom.vue                 |  2 +-
 src/side-bar/demos/mobile.vue                 |  2 +-
 src/side-bar/demos/switch.vue                 |  2 +-
 src/side-bar/demos/with-icon.vue              |  2 +-
 src/skeleton/demos/animation.vue              |  2 +-
 src/skeleton/demos/mobile.vue                 |  2 +-
 src/skeleton/demos/theme.vue                  |  2 +-
 src/slider/demos/base.vue                     |  2 +-
 src/slider/demos/capsule.vue                  |  2 +-
 src/slider/demos/disabled.vue                 |  2 +-
 src/slider/demos/label.vue                    |  2 +-
 src/slider/demos/range.vue                    |  2 +-
 src/slider/demos/step.vue                     |  2 +-
 src/stepper/demos/base.vue                    |  2 +-
 src/stepper/demos/min-max.vue                 |  2 +-
 src/stepper/demos/size.vue                    |  2 +-
 src/stepper/demos/status.vue                  |  2 +-
 src/stepper/demos/theme.vue                   |  2 +-
 src/steps/demos/mobile.vue                    |  4 +-
 src/sticky/demos/container.vue                |  2 +-
 src/style/index.js                            |  2 +
 src/switch/demos/status.vue                   |  2 +-
 src/tab-bar/demos/custom.vue                  |  6 +++
 src/tabs/demos/content.vue                    |  2 +-
 src/tag/demos/checkable.vue                   |  2 +-
 src/tag/demos/mobile.vue                      |  4 +-
 src/textarea/demos/custom.vue                 |  4 +-
 src/upload/demos/base.vue                     |  4 +-
 src/upload/demos/custom.vue                   |  4 +-
 src/upload/demos/multiple.vue                 |  4 +-
 src/upload/demos/status.vue                   |  6 +--
 95 files changed, 266 insertions(+), 113 deletions(-)

diff --git a/site/mobile/app.vue b/site/mobile/app.vue
index ac18fd7a8..c256f25d7 100644
--- a/site/mobile/app.vue
+++ b/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>
diff --git a/site/mobile/main.ts b/site/mobile/main.ts
index 29ac42d00..5aa24a964 100644
--- a/site/mobile/main.ts
+++ b/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';
diff --git a/site/styles/mobile/components.less b/site/styles/mobile/components.less
index 1980b2404..3776f76c6 100644
--- a/site/styles/mobile/components.less
+++ b/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;
 
diff --git a/site/styles/mobile/index.less b/site/styles/mobile/index.less
index b5462c5cd..c91632953 100644
--- a/site/styles/mobile/index.less
+++ b/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;
   }
 }
+
+
diff --git a/site/web/app.vue b/site/web/app.vue
index 4c7d16f43..67fa25087 100644
--- a/site/web/app.vue
+++ b/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: {
diff --git a/src/_common b/src/_common
index 354d9a148..bb5d79c18 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 354d9a14813ac8b5a2a4a7024325195c2397f790
+Subproject commit bb5d79c1813b238b461b01ff3eb69c0560b5cfb8
diff --git a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
index 0f6d0381d..5bf92c37f 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
+++ b/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"
diff --git a/src/action-sheet/demos/mobile.vue b/src/action-sheet/demos/mobile.vue
index a7650cc11..6b411408b 100644
--- a/src/action-sheet/demos/mobile.vue
+++ b/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;
diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
index 9aca08dd5..75b53345a 100644
--- a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/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"
diff --git a/src/avatar/demos/mobile.vue b/src/avatar/demos/mobile.vue
index 0b6cd356b..8bbab0ac3 100644
--- a/src/avatar/demos/mobile.vue
+++ b/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>
diff --git a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
index f6359a2bf..4071190c5 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/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"
diff --git a/src/back-top/demos/mobile.vue b/src/back-top/demos/mobile.vue
index 33d4f52fb..702f8ddaa 100644
--- a/src/back-top/demos/mobile.vue
+++ b/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="圆型返回顶部">
diff --git a/src/badge/demos/base.vue b/src/badge/demos/base.vue
index 9dec7de64..2a458a0d9 100644
--- a/src/badge/demos/base.vue
+++ b/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>
diff --git a/src/checkbox/demos/horizontal.vue b/src/checkbox/demos/horizontal.vue
index ecd2bdcec..1e89e30ce 100644
--- a/src/checkbox/demos/horizontal.vue
+++ b/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>
diff --git a/src/checkbox/demos/special.vue b/src/checkbox/demos/special.vue
index 3aef2b2fb..3c4ea0950 100644
--- a/src/checkbox/demos/special.vue
+++ b/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;
diff --git a/src/count-down/demos/base.vue b/src/count-down/demos/base.vue
index c3c2f8edf..1fdfad0b4 100644
--- a/src/count-down/demos/base.vue
+++ b/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;
 }
 
diff --git a/src/dialog/demos/input.vue b/src/dialog/demos/input.vue
index be94a45bd..9cd2a6eac 100644
--- a/src/dialog/demos/input.vue
+++ b/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>
diff --git a/src/divider/demos/base.vue b/src/divider/demos/base.vue
index 449f2d854..e679a6488 100644
--- a/src/divider/demos/base.vue
+++ b/src/divider/demos/base.vue
@@ -22,7 +22,7 @@
 <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;
 }
@@ -30,7 +30,7 @@
   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>
diff --git a/src/divider/demos/theme.vue b/src/divider/demos/theme.vue
index 4c82393fc..41dafc80f 100644
--- a/src/divider/demos/theme.vue
+++ b/src/divider/demos/theme.vue
@@ -10,7 +10,7 @@
 <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;
 }
diff --git a/src/dropdown-menu/demos/customized.vue b/src/dropdown-menu/demos/customized.vue
index e196986d7..3f482767c 100644
--- a/src/dropdown-menu/demos/customized.vue
+++ b/src/dropdown-menu/demos/customized.vue
@@ -131,6 +131,7 @@ function confirmSelect() {
   &_label {
     padding: 16px 0 0 16px;
     font-size: 14px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
   &_footer {
     display: flex;
diff --git a/src/form/demos/horizontal.vue b/src/form/demos/horizontal.vue
index d4c0a465c..4815ac3c8 100644
--- a/src/form/demos/horizontal.vue
+++ b/src/form/demos/horizontal.vue
@@ -317,7 +317,7 @@ onMounted(() => {
   width: 100%;
 }
 .button-group {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   box-sizing: border-box;
   padding: 16px;
   display: flex;
diff --git a/src/form/demos/mobile.vue b/src/form/demos/mobile.vue
index e139a0909..fafb4aa1f 100644
--- a/src/form/demos/mobile.vue
+++ b/src/form/demos/mobile.vue
@@ -56,7 +56,7 @@ const onChangeSwitch = (val: any) => {
   margin-bottom: 12px;
 }
 .button-group {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   box-sizing: border-box;
   padding: 8px 4px;
   display: flex;
diff --git a/src/form/demos/vertical.vue b/src/form/demos/vertical.vue
index ba2d2f0d5..8a663c9bf 100644
--- a/src/form/demos/vertical.vue
+++ b/src/form/demos/vertical.vue
@@ -301,7 +301,7 @@ onMounted(() => {
   width: 100%;
 }
 .button-group {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   box-sizing: border-box;
   padding: 16px;
   display: flex;
diff --git a/src/icon/demos/mobile.vue b/src/icon/demos/mobile.vue
index d33e648a3..bcc4e029c 100644
--- a/src/icon/demos/mobile.vue
+++ b/src/icon/demos/mobile.vue
@@ -35,4 +35,10 @@ import single from './single.vue';
     margin-right: 24px;
   }
 }
+
+:root[theme-mode='dark'] {
+  .tdesign-mobile-demo {
+    color: var(--td-text-color-primary);
+  }
+}
 </style>
diff --git a/src/image/demos/base.vue b/src/image/demos/base.vue
index 119e26842..337b21b71 100644
--- a/src/image/demos/base.vue
+++ b/src/image/demos/base.vue
@@ -61,7 +61,7 @@ const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
 <style lang="less" scoped>
 .image-example {
   margin-bottom: 24px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
 
   &-title {
     font-size: 14px;
@@ -85,7 +85,7 @@ const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
     }
 
     .image-demo-tip {
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
       font-size: 14px;
       line-height: 22px;
       margin: 16px 0;
diff --git a/src/image/demos/position.vue b/src/image/demos/position.vue
index 98e422482..6eeb39d01 100644
--- a/src/image/demos/position.vue
+++ b/src/image/demos/position.vue
@@ -104,7 +104,7 @@ const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
 <style lang="less" scoped>
 .image-example {
   margin-bottom: 24px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
 
   &-title {
     font-size: 14px;
@@ -127,7 +127,7 @@ const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
     }
 
     .image-demo-tip {
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
       font-size: 14px;
       line-height: 22px;
       margin: 16px 0;
diff --git a/src/image/demos/shape.vue b/src/image/demos/shape.vue
index dd23f0a85..8c2092f07 100644
--- a/src/image/demos/shape.vue
+++ b/src/image/demos/shape.vue
@@ -30,7 +30,7 @@ const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
 <style lang="less" scoped>
 .image-example {
   margin-bottom: 24px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
 
   &-title {
     font-size: 14px;
@@ -56,7 +56,7 @@ const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');
     }
 
     .image-demo-tip {
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
       font-size: 14px;
       line-height: 22px;
       margin: 16px 0;
diff --git a/src/image/demos/status.vue b/src/image/demos/status.vue
index ddd06dae1..68bf48976 100644
--- a/src/image/demos/status.vue
+++ b/src/image/demos/status.vue
@@ -47,7 +47,7 @@ import { Loading as TLoading } from 'tdesign-mobile-vue';
 }
 
 .tips {
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
   font-size: 14px;
   line-height: 22px;
   margin-bottom: 16px;
@@ -56,7 +56,7 @@ import { Loading as TLoading } from 'tdesign-mobile-vue';
 }
 
 .error-tips {
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--td-text-color-placeholder, rgba(0, 0, 0, 0.4));
   font-size: 10px;
 }
 </style>
diff --git a/src/input/demos/bordered.vue b/src/input/demos/bordered.vue
index b01a614b1..29096847e 100644
--- a/src/input/demos/bordered.vue
+++ b/src/input/demos/bordered.vue
@@ -15,14 +15,14 @@ import { ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
 
 <style lang="less" scoped>
 .input-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 16px 16px 24px;
 
   --td-input-vertical-padding: 12px;
 }
 
 .input-demo__summary {
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   font-size: 12px;
   line-height: 20px;
   margin-bottom: 8px;
diff --git a/src/link/demos/base.vue b/src/link/demos/base.vue
index 4be981e3f..7873144f8 100644
--- a/src/link/demos/base.vue
+++ b/src/link/demos/base.vue
@@ -7,7 +7,7 @@
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
 }
diff --git a/src/link/demos/linkSize.vue b/src/link/demos/linkSize.vue
index b0dec20c7..ca24fdde7 100644
--- a/src/link/demos/linkSize.vue
+++ b/src/link/demos/linkSize.vue
@@ -26,7 +26,7 @@ import { JumpIcon } from 'tdesign-icons-vue-next';
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
   align-items: center;
diff --git a/src/link/demos/prefix.vue b/src/link/demos/prefix.vue
index e2684995b..a115f56a8 100644
--- a/src/link/demos/prefix.vue
+++ b/src/link/demos/prefix.vue
@@ -21,7 +21,7 @@ import { LinkIcon } from 'tdesign-icons-vue-next';
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
   margin-bottom: 6.4vw;
diff --git a/src/link/demos/status.vue b/src/link/demos/status.vue
index cf2d31896..8f1a58269 100644
--- a/src/link/demos/status.vue
+++ b/src/link/demos/status.vue
@@ -40,7 +40,7 @@ import { JumpIcon } from 'tdesign-icons-vue-next';
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
   margin-bottom: 6.4vw;
diff --git a/src/link/demos/suffix.vue b/src/link/demos/suffix.vue
index 5a804712d..190af8fdf 100644
--- a/src/link/demos/suffix.vue
+++ b/src/link/demos/suffix.vue
@@ -20,7 +20,7 @@ import { JumpIcon } from 'tdesign-icons-vue-next';
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
   margin-bottom: 6.4vw;
diff --git a/src/link/demos/theme.vue b/src/link/demos/theme.vue
index 95d64408b..00357f753 100644
--- a/src/link/demos/theme.vue
+++ b/src/link/demos/theme.vue
@@ -41,7 +41,7 @@ import { JumpIcon } from 'tdesign-icons-vue-next';
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
   margin-bottom: 6.4vw;
diff --git a/src/link/demos/underline.vue b/src/link/demos/underline.vue
index fdb61d714..088bfcbff 100644
--- a/src/link/demos/underline.vue
+++ b/src/link/demos/underline.vue
@@ -12,7 +12,7 @@ const clickHandle = () => {
 <style scoped>
 .tdesign-mobile-link-demo {
   height: 48px;
-  background: #ffffffff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   justify-content: space-around;
   margin-bottom: 6.4vw;
diff --git a/src/list/__test__/__snapshots__/demo.test.jsx.snap b/src/list/__test__/__snapshots__/demo.test.jsx.snap
index 4da8265ae..cb51f102a 100644
--- a/src/list/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/list/__test__/__snapshots__/demo.test.jsx.snap
@@ -75,7 +75,7 @@ exports[`List > List mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
             role="button"
             type="button"
           >
@@ -91,7 +91,7 @@ exports[`List > List mobileVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
             role="button"
             type="button"
           >
@@ -107,7 +107,7 @@ exports[`List > List mobileVue demo works fine 1`] = `
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
             role="button"
             type="button"
           >
diff --git a/src/list/demos/mobile.vue b/src/list/demos/mobile.vue
index b395edb1c..7ec4d865a 100644
--- a/src/list/demos/mobile.vue
+++ b/src/list/demos/mobile.vue
@@ -7,9 +7,13 @@
           瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。
         </p>
         <tdesign-demo-block title="01 类型" summary="基础列表">
-          <t-button size="large" variant="outline" @click="onChangeTab('base')"> 基础列表 </t-button>
-          <t-button size="large" variant="outline" @click="onChangeTab('pull-refresh')"> 下拉刷新 </t-button>
-          <t-button size="large" variant="outline" @click="onChangeTab('error-tip')"> 错误提示 </t-button>
+          <t-button size="large" variant="outline" theme="primary" @click="onChangeTab('base')"> 基础列表 </t-button>
+          <t-button size="large" variant="outline" theme="primary" @click="onChangeTab('pull-refresh')">
+            下拉刷新
+          </t-button>
+          <t-button size="large" variant="outline" theme="primary" @click="onChangeTab('error-tip')">
+            错误提示
+          </t-button>
         </tdesign-demo-block>
       </div>
       <div v-if="currentTab === 'base'">
diff --git a/src/navbar/demos/size.vue b/src/navbar/demos/size.vue
index 2c4e6a2d7..6a7e6add2 100644
--- a/src/navbar/demos/size.vue
+++ b/src/navbar/demos/size.vue
@@ -31,9 +31,9 @@ import { Icon as TIcon } from 'tdesign-icons-vue-next';
   font-size: 28px;
   line-height: 36px;
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   padding: 0px 20px 16px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 
 .t-icon-home {
diff --git a/src/notice-bar/demos/custom.vue b/src/notice-bar/demos/custom.vue
index 5383e249b..e98b2a2c0 100644
--- a/src/notice-bar/demos/custom.vue
+++ b/src/notice-bar/demos/custom.vue
@@ -16,11 +16,11 @@ import { SoundIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
 <style lang="less">
 .cover-class {
   .t-icon {
-    color: rgba(0, 0, 0, 0.9) !important;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9)) !important;
   }
   .t-notice-bar__text {
-    color: #ffffff !important;
+    color: var(--bg-color-demo, #fff) !important;
   }
-  background-color: rgba(243, 243, 243, 1);
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/notice-bar/demos/mobile.vue b/src/notice-bar/demos/mobile.vue
index aeeb6c2a9..57ddf877e 100644
--- a/src/notice-bar/demos/mobile.vue
+++ b/src/notice-bar/demos/mobile.vue
@@ -45,7 +45,7 @@ import scrollDemo from './scrolling.vue';
 
 <style>
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 
 .notice-bar-demo-block {
diff --git a/src/overlay/__test__/__snapshots__/demo.test.jsx.snap b/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
index cdcd19e5f..25a5105ab 100644
--- a/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
@@ -7,7 +7,7 @@ exports[`Overlay > Overlay baseVue demo works fine 1`] = `
   
   <button
     aria-disabled="false"
-    class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
     role="button"
     type="button"
   >
@@ -73,7 +73,7 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
         
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           role="button"
           type="button"
         >
diff --git a/src/overlay/demos/base.vue b/src/overlay/demos/base.vue
index d4fe35269..8c31376fa 100644
--- a/src/overlay/demos/base.vue
+++ b/src/overlay/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-button size="large" block variant="outline" @click="visible = true">基础用法</t-button>
+  <t-button size="large" block variant="outline" theme="primary" @click="visible = true">基础用法</t-button>
   <t-overlay :visible="visible" @click="visible = false" />
 </template>
 
diff --git a/src/overlay/demos/mobile.vue b/src/overlay/demos/mobile.vue
index e039e7de8..4295d43f4 100644
--- a/src/overlay/demos/mobile.vue
+++ b/src/overlay/demos/mobile.vue
@@ -18,7 +18,7 @@ import BaseDemo from './base.vue';
 body,
 #app,
 .tdesign-mobile-demo {
-  background: #fff;
+  background-color: var(--bg-color-demo, #fff);
 
   .demo-block {
     padding: 0 16px;
diff --git a/src/popover/demos/mobile.vue b/src/popover/demos/mobile.vue
index 8eabbf0bf..544522345 100644
--- a/src/popover/demos/mobile.vue
+++ b/src/popover/demos/mobile.vue
@@ -21,6 +21,6 @@ import placementDemo from './placement.vue';
 
 <style lang="less" scoped>
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/popover/demos/placement.vue b/src/popover/demos/placement.vue
index bc88ae5a9..2e13cdc35 100644
--- a/src/popover/demos/placement.vue
+++ b/src/popover/demos/placement.vue
@@ -115,7 +115,7 @@
 
   &__summary {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
     line-height: 22px;
   }
 
diff --git a/src/popover/demos/type.vue b/src/popover/demos/type.vue
index 2958e0385..72b5eea16 100644
--- a/src/popover/demos/type.vue
+++ b/src/popover/demos/type.vue
@@ -63,7 +63,7 @@ const handleVisibleChange = (val: boolean) => {
 
   &__summary {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
     line-height: 22px;
   }
 }
diff --git a/src/popup/demos/mobile.vue b/src/popup/demos/mobile.vue
index f04cf2c5f..17bc6a533 100644
--- a/src/popup/demos/mobile.vue
+++ b/src/popup/demos/mobile.vue
@@ -20,6 +20,6 @@ import customClose from './custom-close.vue';
 
 <style scoped>
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/popup/demos/with-title.vue b/src/popup/demos/with-title.vue
index fc20be438..b559f2ad9 100644
--- a/src/popup/demos/with-title.vue
+++ b/src/popup/demos/with-title.vue
@@ -36,6 +36,7 @@ const onHide = () => (visible.value = false);
   text-align: center;
   font-weight: 600;
   font-size: 18px;
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
 }
 
 .btn {
@@ -44,7 +45,7 @@ const onHide = () => (visible.value = false);
 }
 
 .btn--cancel {
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
 }
 
 .btn--confirm {
diff --git a/src/radio/demos/horizontal.vue b/src/radio/demos/horizontal.vue
index e1a1ee8cd..68154ad3d 100644
--- a/src/radio/demos/horizontal.vue
+++ b/src/radio/demos/horizontal.vue
@@ -17,13 +17,13 @@ const groupChangeFn = (value: any, context: { e: Event }) => {
 
 <style>
 .radio-group-demo {
-  background: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 
 .box {
   padding: 16px;
   display: flex;
   justify-content: space-between;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/rate/demos/action.vue b/src/rate/demos/action.vue
index 9beb6bc06..19466d0d7 100644
--- a/src/rate/demos/action.vue
+++ b/src/rate/demos/action.vue
@@ -27,7 +27,7 @@ const value2 = ref(3);
   line-height: 22px;
 }
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -38,6 +38,7 @@ const value2 = ref(3);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 
   &--space {
diff --git a/src/rate/demos/base.vue b/src/rate/demos/base.vue
index 7922049c8..95a93a361 100644
--- a/src/rate/demos/base.vue
+++ b/src/rate/demos/base.vue
@@ -16,7 +16,7 @@ const value = ref(3);
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -26,6 +26,7 @@ const value = ref(3);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 }
 </style>
diff --git a/src/rate/demos/color.vue b/src/rate/demos/color.vue
index ead90fabd..8f9190b70 100644
--- a/src/rate/demos/color.vue
+++ b/src/rate/demos/color.vue
@@ -18,7 +18,7 @@ const value1 = ref(3);
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -28,6 +28,7 @@ const value1 = ref(3);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 
   &--space {
diff --git a/src/rate/demos/count.vue b/src/rate/demos/count.vue
index 1ca222712..7a182fcb8 100644
--- a/src/rate/demos/count.vue
+++ b/src/rate/demos/count.vue
@@ -13,7 +13,7 @@ const value = ref(2);
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -23,6 +23,7 @@ const value = ref(2);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 }
 </style>
diff --git a/src/rate/demos/custom.vue b/src/rate/demos/custom.vue
index 99c35f754..d30463f0d 100644
--- a/src/rate/demos/custom.vue
+++ b/src/rate/demos/custom.vue
@@ -17,7 +17,7 @@ const value = ref(3);
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -27,6 +27,7 @@ const value = ref(3);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 }
 </style>
diff --git a/src/rate/demos/show-text.vue b/src/rate/demos/show-text.vue
index 999357534..f20c6a831 100644
--- a/src/rate/demos/show-text.vue
+++ b/src/rate/demos/show-text.vue
@@ -24,7 +24,7 @@ const texts = ref(['很差', '差', '一般', '好评', '优秀']);
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -34,6 +34,7 @@ const texts = ref(['很差', '差', '一般', '好评', '优秀']);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 
   &--space {
diff --git a/src/rate/demos/size.vue b/src/rate/demos/size.vue
index 6e4d83883..d8c0caf15 100644
--- a/src/rate/demos/size.vue
+++ b/src/rate/demos/size.vue
@@ -18,7 +18,7 @@ const value1 = ref(3);
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -28,6 +28,7 @@ const value1 = ref(3);
     font-size: 16px;
     margin-right: 16px;
     min-width: 80px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   }
 
   &--space {
diff --git a/src/rate/demos/special.vue b/src/rate/demos/special.vue
index 094ea005f..bb7e8ede1 100644
--- a/src/rate/demos/special.vue
+++ b/src/rate/demos/special.vue
@@ -14,7 +14,7 @@ const texts = ref(['非常糟糕', '有些糟糕', '可以尝试', '可以前往
 
 <style lang="less" scoped>
 .rate-demo-cell {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 12px 16px;
   line-height: 1;
   display: flex;
@@ -29,6 +29,7 @@ const texts = ref(['非常糟糕', '有些糟糕', '可以尝试', '可以前往
   .desc {
     text-align: center;
     margin-top: 12px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
 
     &--active {
       color: #ed7b2f;
diff --git a/src/result/__test__/__snapshots__/demo.test.jsx.snap b/src/result/__test__/__snapshots__/demo.test.jsx.snap
index ca74b2f8a..ac7f53ff1 100644
--- a/src/result/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/result/__test__/__snapshots__/demo.test.jsx.snap
@@ -392,7 +392,7 @@ exports[`Result > Result mobileVue demo works fine 1`] = `
       >
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
           data-v-772b64ec=""
           role="button"
           type="button"
diff --git a/src/result/demos/mobile.vue b/src/result/demos/mobile.vue
index 929633dde..2849ca6cd 100644
--- a/src/result/demos/mobile.vue
+++ b/src/result/demos/mobile.vue
@@ -13,7 +13,7 @@
 
     <tdesign-demo-block title="" summary="页面位置展示">
       <div class="padding">
-        <t-button size="large" variant="outline" block @click="handleClick"> 页面位置展示 </t-button>
+        <t-button size="large" variant="outline" block theme="primary" @click="handleClick"> 页面位置展示 </t-button>
       </div>
     </tdesign-demo-block>
   </div>
@@ -24,7 +24,7 @@
         <t-result theme="success" title="成功状态" description="描述文字" />
       </div>
       <div class="demo-section__wrapper">
-        <t-button size="large" variant="outline" block @click="handleClick"> 返回 </t-button>
+        <t-button size="large" variant="outline" block theme="primary" @click="handleClick"> 返回 </t-button>
       </div>
     </div>
   </template>
@@ -45,7 +45,7 @@ const handleClick = () => {
 
 <style lang="less" scoped>
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 
   .padding {
     padding: 0 16px 16px;
@@ -54,7 +54,7 @@ const handleClick = () => {
 
 .result-page {
   height: calc(100vh - 50px);
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 
   .demo-section__wrapper {
     padding: 24px 16px;
diff --git a/src/search/demos/action.vue b/src/search/demos/action.vue
index faa6a0967..c1016f92b 100644
--- a/src/search/demos/action.vue
+++ b/src/search/demos/action.vue
@@ -15,7 +15,7 @@ const value = ref('');
 </script>
 <style lang="less">
 .example-search {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 8px 16px;
 }
 </style>
diff --git a/src/search/demos/base.vue b/src/search/demos/base.vue
index 008a2841e..057ea5740 100644
--- a/src/search/demos/base.vue
+++ b/src/search/demos/base.vue
@@ -39,7 +39,7 @@ const value = ref('');
 </script>
 <style lang="less">
 .example-search {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 8px 16px;
 }
 </style>
diff --git a/src/search/demos/shape.vue b/src/search/demos/shape.vue
index 350c7975a..5d2fa1a1c 100644
--- a/src/search/demos/shape.vue
+++ b/src/search/demos/shape.vue
@@ -15,7 +15,7 @@ const value = ref('');
 </script>
 <style lang="less">
 .example-search {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   padding: 8px 16px;
 }
 </style>
diff --git a/src/side-bar/demos/base.vue b/src/side-bar/demos/base.vue
index 057494c30..480100c68 100644
--- a/src/side-bar/demos/base.vue
+++ b/src/side-bar/demos/base.vue
@@ -117,7 +117,7 @@ const onScroll = (e: WheelEvent | Event) => {
 .side-bar-wrapper {
   display: flex;
   height: 100vh;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 
   .content {
     flex: 1;
diff --git a/src/side-bar/demos/custom.vue b/src/side-bar/demos/custom.vue
index ce2494be1..f045c4976 100644
--- a/src/side-bar/demos/custom.vue
+++ b/src/side-bar/demos/custom.vue
@@ -117,7 +117,7 @@ const onScroll = (e: WheelEvent | Event) => {
 .side-bar-wrapper {
   display: flex;
   height: 100vh;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 
   --td-side-bar-border-radius: 6px;
   --td-side-bar-active-color: green;
diff --git a/src/side-bar/demos/mobile.vue b/src/side-bar/demos/mobile.vue
index a50e037eb..95a16c9b3 100644
--- a/src/side-bar/demos/mobile.vue
+++ b/src/side-bar/demos/mobile.vue
@@ -38,6 +38,6 @@ const handleClick = (t = 'base') => {
 }
 
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/side-bar/demos/switch.vue b/src/side-bar/demos/switch.vue
index 878443514..3fd393fc3 100644
--- a/src/side-bar/demos/switch.vue
+++ b/src/side-bar/demos/switch.vue
@@ -82,7 +82,7 @@ const onSideBarChange = (value: TdSideBarProps['value']) => {
 .side-bar-wrapper {
   display: flex;
   height: 100vh;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   overflow: hidden;
   .content {
     flex: 1;
diff --git a/src/side-bar/demos/with-icon.vue b/src/side-bar/demos/with-icon.vue
index fd2ae8129..1ca882568 100644
--- a/src/side-bar/demos/with-icon.vue
+++ b/src/side-bar/demos/with-icon.vue
@@ -124,7 +124,7 @@ const onScroll = (e: WheelEvent | Event) => {
 .side-bar-wrapper {
   display: flex;
   height: 100vh;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   .content {
     flex: 1;
     overflow-y: scroll;
diff --git a/src/skeleton/demos/animation.vue b/src/skeleton/demos/animation.vue
index 0c9115c0a..c321414d6 100644
--- a/src/skeleton/demos/animation.vue
+++ b/src/skeleton/demos/animation.vue
@@ -23,7 +23,7 @@ const animationList = [
 <style lang="less" scoped>
 .demo-section__desc {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--td-text-color-disabled, rgba(0, 0, 0, 0.4));
   margin-top: 8px;
   line-height: 22px;
 }
diff --git a/src/skeleton/demos/mobile.vue b/src/skeleton/demos/mobile.vue
index 780b81d7f..a98d47b6e 100644
--- a/src/skeleton/demos/mobile.vue
+++ b/src/skeleton/demos/mobile.vue
@@ -29,6 +29,6 @@ import imageGroup from './image-group.vue';
 
 <style lang="less" scoped>
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/skeleton/demos/theme.vue b/src/skeleton/demos/theme.vue
index 8836a2832..6edfcb6fb 100644
--- a/src/skeleton/demos/theme.vue
+++ b/src/skeleton/demos/theme.vue
@@ -34,7 +34,7 @@ const themeList = [
 <style lang="less" scoped>
 .demo-section__desc {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--td-text-color-disabled, rgba(0, 0, 0, 0.4));
   margin-top: 8px;
   line-height: 22px;
 }
diff --git a/src/slider/demos/base.vue b/src/slider/demos/base.vue
index 4aea81fe2..701a20322 100644
--- a/src/slider/demos/base.vue
+++ b/src/slider/demos/base.vue
@@ -6,7 +6,7 @@
 
 <style lang="less" scoped>
 .wrapper {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   padding: 18px 0;
 }
 </style>
diff --git a/src/slider/demos/capsule.vue b/src/slider/demos/capsule.vue
index 3ba1e655b..c8162ee48 100644
--- a/src/slider/demos/capsule.vue
+++ b/src/slider/demos/capsule.vue
@@ -32,7 +32,7 @@ const marks = {
 
 <style lang="less" scoped>
 .wrapper {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   margin-top: 16px;
   padding: 16px 0;
 }
diff --git a/src/slider/demos/disabled.vue b/src/slider/demos/disabled.vue
index 6d25ef9a8..029f8ebeb 100644
--- a/src/slider/demos/disabled.vue
+++ b/src/slider/demos/disabled.vue
@@ -23,7 +23,7 @@ const marks = {
 </script>
 <style lang="less" scoped>
 .wrapper {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   margin-top: 16px;
   padding: 18px 0;
 }
diff --git a/src/slider/demos/label.vue b/src/slider/demos/label.vue
index 00b2f40a2..9f0da80e2 100644
--- a/src/slider/demos/label.vue
+++ b/src/slider/demos/label.vue
@@ -18,7 +18,7 @@ const onChange = (e: any) => {
 
 <style lang="less" scoped>
 .wrapper {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   margin-top: 16px;
   padding: 18px 0;
 }
diff --git a/src/slider/demos/range.vue b/src/slider/demos/range.vue
index 0b295a880..bf5a7328d 100644
--- a/src/slider/demos/range.vue
+++ b/src/slider/demos/range.vue
@@ -16,7 +16,7 @@ function onChange($event: number | number[]) {
 
 <style lang="less" scoped>
 .wrapper {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   padding: 18px 0;
 }
 </style>
diff --git a/src/slider/demos/step.vue b/src/slider/demos/step.vue
index 1e4de24f8..1950de47d 100644
--- a/src/slider/demos/step.vue
+++ b/src/slider/demos/step.vue
@@ -24,7 +24,7 @@ const marks = ref({
 
 <style lang="less" scoped>
 .wrapper {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   margin-top: 16px;
   padding: 18px 0;
 }
diff --git a/src/stepper/demos/base.vue b/src/stepper/demos/base.vue
index 8c671db53..9bf091c62 100644
--- a/src/stepper/demos/base.vue
+++ b/src/stepper/demos/base.vue
@@ -13,6 +13,6 @@ const number = ref(3);
 <style lang="less">
 .stepper-example {
   padding: 16px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/stepper/demos/min-max.vue b/src/stepper/demos/min-max.vue
index 5d8847f8f..5ceb55256 100644
--- a/src/stepper/demos/min-max.vue
+++ b/src/stepper/demos/min-max.vue
@@ -36,6 +36,6 @@ const onOverlimit = ($type: string) => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/stepper/demos/size.vue b/src/stepper/demos/size.vue
index 3481b3a94..89f9f06d9 100644
--- a/src/stepper/demos/size.vue
+++ b/src/stepper/demos/size.vue
@@ -22,6 +22,6 @@ const handleChange = ($event: number) => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/stepper/demos/status.vue b/src/stepper/demos/status.vue
index 3db3b5dd0..0c0f72093 100644
--- a/src/stepper/demos/status.vue
+++ b/src/stepper/demos/status.vue
@@ -7,6 +7,6 @@
 <style lang="less">
 .stepper-example {
   padding: 16px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/stepper/demos/theme.vue b/src/stepper/demos/theme.vue
index 156f32e2e..5c56bf7fc 100644
--- a/src/stepper/demos/theme.vue
+++ b/src/stepper/demos/theme.vue
@@ -12,6 +12,6 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/steps/demos/mobile.vue b/src/steps/demos/mobile.vue
index 3a24409c0..507343387 100644
--- a/src/steps/demos/mobile.vue
+++ b/src/steps/demos/mobile.vue
@@ -27,11 +27,11 @@ import special from './special.vue';
 .steps-horizontal-demo-block {
   margin: 16px 0 24px;
   padding: 16px 0;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 .steps-vertical-demo-block {
   margin: 16px 0 24px;
   padding: 16px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 </style>
diff --git a/src/sticky/demos/container.vue b/src/sticky/demos/container.vue
index 429428868..e3caedcd4 100644
--- a/src/sticky/demos/container.vue
+++ b/src/sticky/demos/container.vue
@@ -15,7 +15,7 @@ const onScroll = (context: { scrollTop: number; isFixed: boolean }) => {
 .sticky-demo {
   width: 100%;
   height: 150px;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--bg-color-demo-secondary, #2c2c2c);
 }
 .common-button {
   color: #fff;
diff --git a/src/style/index.js b/src/style/index.js
index fcfc17545..6366843e7 100644
--- a/src/style/index.js
+++ b/src/style/index.js
@@ -1 +1,3 @@
 import '../_common/style/web/_global.less';
+// theme(用于换肤)
+import '../_common/style/mobile/theme/_index.less';
diff --git a/src/switch/demos/status.vue b/src/switch/demos/status.vue
index 596e50d66..36da64b7e 100644
--- a/src/switch/demos/status.vue
+++ b/src/switch/demos/status.vue
@@ -33,7 +33,7 @@
 
 .demo__title {
   margin: 24px 16px 16px;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
   font-size: 14px;
   line-height: 22px;
 }
diff --git a/src/tab-bar/demos/custom.vue b/src/tab-bar/demos/custom.vue
index 7fc46c446..7bdae16c3 100644
--- a/src/tab-bar/demos/custom.vue
+++ b/src/tab-bar/demos/custom.vue
@@ -22,6 +22,12 @@ const list = ref([
 </script>
 
 <style lang="less" scoped>
+:root[theme-mode='dark'] {
+  .wrapper {
+    --td-tab-bar-color: rgba(0, 0, 0, 0.9);
+  }
+}
+
 .wrapper {
   --td-tab-bar-border-color: #e7e7e7;
   --td-tab-bar-bg-color: #eee;
diff --git a/src/tabs/demos/content.vue b/src/tabs/demos/content.vue
index bd1ed2f55..76d8365aa 100644
--- a/src/tabs/demos/content.vue
+++ b/src/tabs/demos/content.vue
@@ -46,7 +46,7 @@ const onChange = (value: string) => {
   align-items: center;
   justify-content: center;
   display: flex;
-  color: rgba(#000000, 0.66);
+  color: var(--td-text-color-secondary, rgba(#000000, 0.66));
   margin: 0;
   font-size: 14px;
   font-weight: 400;
diff --git a/src/tag/demos/checkable.vue b/src/tag/demos/checkable.vue
index 053ca546d..5e7e1d3df 100644
--- a/src/tag/demos/checkable.vue
+++ b/src/tag/demos/checkable.vue
@@ -23,7 +23,7 @@ const variants = ['light', 'dark', 'outline', 'light-outline'];
   align-items: center;
 
   &__title {
-    color: rgba(0, 0, 0, 0.4);
+    color: var(--td-text-color-disabled, rgba(0, 0, 0, 0.4));
     font-size: 14px;
     width: 80px;
     margin-right: 16px;
diff --git a/src/tag/demos/mobile.vue b/src/tag/demos/mobile.vue
index 3c034755a..25b4f151c 100644
--- a/src/tag/demos/mobile.vue
+++ b/src/tag/demos/mobile.vue
@@ -28,7 +28,7 @@ import Size from './size.vue';
 
 <style lang="less">
 .tdesign-mobile-demo {
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 .tag-demo {
   padding: 0 16px;
@@ -38,7 +38,7 @@ import Size from './size.vue';
 }
 .group {
   padding: 16px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
   display: flex;
   align-items: center;
 
diff --git a/src/textarea/demos/custom.vue b/src/textarea/demos/custom.vue
index 9c613a403..3324a962e 100644
--- a/src/textarea/demos/custom.vue
+++ b/src/textarea/demos/custom.vue
@@ -8,11 +8,11 @@
 <style lang="less" scoped>
 .textarea-example {
   padding: 16px 16px 24px;
-  background-color: #fff;
+  background-color: var(--bg-color-demo, #fff);
 }
 .textarea-example__label {
   display: block;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
   font-size: 12px;
   line-height: 20px;
   padding-bottom: 8px;
diff --git a/src/upload/demos/base.vue b/src/upload/demos/base.vue
index 0c59bd87e..bdc2274d7 100644
--- a/src/upload/demos/base.vue
+++ b/src/upload/demos/base.vue
@@ -28,10 +28,10 @@ const onValidate = (context: any) => {
 
 <style scoped lang="less">
 .upload-demo {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   .upload-title {
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.9);
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
     padding: 12px 16px 0;
   }
 }
diff --git a/src/upload/demos/custom.vue b/src/upload/demos/custom.vue
index 8ffec41b6..c6423b436 100644
--- a/src/upload/demos/custom.vue
+++ b/src/upload/demos/custom.vue
@@ -61,11 +61,11 @@ const onValidate = (context: any) => {
 
 <style lang="less" scoped>
 .upload-demo {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
 
   .upload-title {
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.9);
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
     padding: 12px 16px 0;
   }
 
diff --git a/src/upload/demos/multiple.vue b/src/upload/demos/multiple.vue
index 307b14f9f..2878a5ef5 100644
--- a/src/upload/demos/multiple.vue
+++ b/src/upload/demos/multiple.vue
@@ -68,10 +68,10 @@ const files = ref([
 </script>
 <style scoped lang="less">
 .upload-demo {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
   .upload-title {
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.9);
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
     padding: 12px 16px 0;
   }
 }
diff --git a/src/upload/demos/status.vue b/src/upload/demos/status.vue
index c1cbb3ca6..0a6d96536 100644
--- a/src/upload/demos/status.vue
+++ b/src/upload/demos/status.vue
@@ -51,7 +51,7 @@ const failFiles = [
 
 <style scoped lang="less">
 .upload-demo {
-  background: #fff;
+  background: var(--bg-color-demo, #fff);
 
   & + & {
     margin-top: 16px;
@@ -60,11 +60,11 @@ const failFiles = [
   &__title {
     font-size: 14px;
     margin: 24px 16px 16px;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
   }
   .upload-title {
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.9);
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
     padding: 12px 16px 0;
   }
 }