diff --git a/examples/sites/package.json b/examples/sites/package.json
index da5334cbe6..a529c0d508 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -50,6 +50,7 @@
     "github-markdown-css": "~5.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.3.0",
+    "@vueuse/core": "^12.7.0",
     "prismjs": "^1.28.0",
     "sortablejs": "1.15.0",
     "tailwindcss": "^3.2.4",
diff --git a/examples/sites/src/views/components-doc/components/demo.vue b/examples/sites/src/views/components-doc/components/demo.vue
index 94e50887b8..b1c3fdee82 100644
--- a/examples/sites/src/views/components-doc/components/demo.vue
+++ b/examples/sites/src/views/components-doc/components/demo.vue
@@ -355,7 +355,7 @@ onBeforeUnmount(() => {
   }
 }
 // 暗黑主题
-:global(html.dark-theme .pc-demo-container) {
+:global(html.dark .pc-demo-container) {
   background: #000;
 }
 
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 0e1727b5c2..39b843f998 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -2,6 +2,9 @@
   <div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
     <div class="content-layout ti-fi-1" :has-sider="!isFrame">
       <div id="layoutSider" class="layout-sider" :class="{ 'saas-border': templateModeState.isSaas }" v-if="!isFrame">
+        <div style="padding: 10px 0; text-align: center">
+          <tiny-button :reset-time="0" type="info" @click="toggleDark()">{{ isDark ? 'dark' : 'light' }}</tiny-button>
+        </div>
         <tiny-tree-menu
           ref="treeMenuRef"
           class="main-menu"
@@ -65,6 +68,7 @@ import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from
 import useTheme from '@/tools/useTheme'
 import FloatSettings from '@/views/components-doc/components/float-settings.vue'
 import VersionTip from '@/views/components-doc/components/version-tip.vue'
+import { useDark, useToggle } from '@vueuse/core'
 
 export default defineComponent({
   name: 'LayoutVue',
@@ -103,6 +107,8 @@ export default defineComponent({
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/${route}${key}`
 
     const isThemeSaas = import.meta.env.VITE_TINY_THEME === 'saas'
+    const isDark = useDark()
+    const toggleDark = useToggle(isDark)
 
     const changeLanguage = () => {
       appFn.toggleLang()
@@ -191,6 +197,8 @@ export default defineComponent({
       getWord,
       i18nByKey,
       isThemeSaas,
+      isDark,
+      toggleDark,
       isShowFilter
     }
   }
diff --git a/packages/theme/src/base/dark-theme.less b/packages/theme/src/base/dark-theme.less
index 39469f6d27..bb6fad8d8e 100644
--- a/packages/theme/src/base/dark-theme.less
+++ b/packages/theme/src/base/dark-theme.less
@@ -1,5 +1,5 @@
 /* prettier-ignore */
-:root {
+:root.dark {
   /* 1.1品牌色 */
 
   /* 品牌主色 */
diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less
index cd142cf1e0..3767379a13 100644
--- a/packages/theme/src/base/index.less
+++ b/packages/theme/src/base/index.less
@@ -14,5 +14,5 @@
 @import './vars.less';
 // @import './old-theme.less';
 // @import './aurora-theme.less';
-// @import './dark-theme.less';
+@import './dark-theme.less';
 @import './transition.less';