fix: tdesign theme toggle and demos (vbenjs#7087)

Author: ppxb

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 文档

apps/web-tdesign/src/views/demos/tdesign/index.vue

@@ -38,15 +38,15 @@ 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>
         <Button theme="default"> Info </Button>
         <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>