From 19b2d7af419d68e59458d30aa0ff5e2646eaf8af Mon Sep 17 00:00:00 2001
From: ppxb <317842449@qq.com>
Date: Sat, 10 Jan 2026 14:11:08 +0800
Subject: [PATCH] fix: tdesign theme toggle and demos (#7087)

---
 apps/web-tdesign/src/app.vue                      | 15 ++++++++-------
 .../web-tdesign/src/views/demos/tdesign/index.vue |  6 +++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/web-tdesign/src/app.vue b/apps/web-tdesign/src/app.vue
index f37688b67..f2fa88408 100644
--- a/apps/web-tdesign/src/app.vue
+++ b/apps/web-tdesign/src/app.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { GlobalConfigProvider } from 'tdesign-vue-next';
 
-import { onMounted } from 'vue';
+import { watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
 
@@ -12,12 +12,13 @@ import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
 defineOptions({ name: 'App' });
 const { isDark } = usePreferences();
 
-onMounted(() => {
-  document.documentElement.setAttribute(
-    'theme-mode',
-    isDark.value ? 'dark' : '',
-  );
-});
+watch(
+  () => isDark.value,
+  (dark) => {
+    document.documentElement.setAttribute('theme-mode', dark ? 'dark' : '');
+  },
+  { immediate: true },
+);
 
 const customConfig: GlobalConfigProvider = {
   // 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档
diff --git a/apps/web-tdesign/src/views/demos/tdesign/index.vue b/apps/web-tdesign/src/views/demos/tdesign/index.vue
index f44f96e50..27299dea5 100644
--- a/apps/web-tdesign/src/views/demos/tdesign/index.vue
+++ b/apps/web-tdesign/src/views/demos/tdesign/index.vue
@@ -38,7 +38,7 @@ function notify(type: NotificationType) {
     description="支持多语言，主题功能集成切换等"
     title="TDesign Vue组件使用演示"
   >
-    <Card class="mb-5" title="按钮">
+    <Card class="!mb-5" title="按钮">
       <Space>
         <Button>Default</Button>
         <Button theme="primary"> Primary </Button>
@@ -46,7 +46,7 @@ function notify(type: NotificationType) {
         <Button theme="danger"> Error </Button>
       </Space>
     </Card>
-    <Card class="mb-5" title="Message">
+    <Card class="!mb-5" title="Message">
       <Space>
         <Button @click="info"> 信息 </Button>
         <Button theme="danger" @click="error"> 错误 </Button>
@@ -55,7 +55,7 @@ function notify(type: NotificationType) {
       </Space>
     </Card>
 
-    <Card class="mb-5" title="Notification">
+    <Card class="!mb-5" title="Notification">
       <Space>
         <Button @click="notify('info')"> 信息 </Button>
         <Button theme="danger" @click="notify('error')"> 错误 </Button>