diff --git a/package.json b/package.json
index 516bb64..bad05b3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@types/node": "^22.5.4",
+    "@vueuse/core": "^11.0.3",
     "element-plus": "^2.8.1",
     "pinia": "^2.2.2",
     "vue": "^3.4.37",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0952c6..ea95395 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@types/node':
         specifier: ^22.5.4
         version: 22.5.4
+      '@vueuse/core':
+        specifier: ^11.0.3
+        version: 11.0.3(vue@3.5.2(typescript@5.5.4))
       element-plus:
         specifier: ^2.8.1
         version: 2.8.1(vue@3.5.2(typescript@5.5.4))
@@ -35,7 +38,7 @@ importers:
         version: 5.5.4
       unplugin-auto-import:
         specifier: ^0.18.2
-        version: 0.18.2(@vueuse/core@9.13.0(vue@3.5.2(typescript@5.5.4)))(rollup@4.21.2)
+        version: 0.18.2(@vueuse/core@11.0.3(vue@3.5.2(typescript@5.5.4)))(rollup@4.21.2)
       unplugin-vue-components:
         specifier: ^0.27.4
         version: 0.27.4(@babel/parser@7.25.6)(rollup@4.21.2)(vue@3.5.2(typescript@5.5.4))
@@ -358,6 +361,9 @@ packages:
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@vitejs/plugin-vue@5.1.3':
     resolution: {integrity: sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -417,12 +423,21 @@ packages:
   '@vue/shared@3.5.2':
     resolution: {integrity: sha512-Ce89WNFBzcDca/AgFTxgX4/K4iAyF7oFIp8Z5aBbFBNbtpwnQr+5pZOoHndxnjE2h+YFcipVMzs9UL11XB6dwA==}
 
+  '@vueuse/core@11.0.3':
+    resolution: {integrity: sha512-RENlh64+SYA9XMExmmH1a3TPqeIuJBNNB/63GT35MZI+zpru3oMRUA6cEFr9HmGqEgUisurwGwnIieF6qu3aXw==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
+  '@vueuse/metadata@11.0.3':
+    resolution: {integrity: sha512-+FtbO4SD5WpsOcQTcC0hAhNlOid6QNLzqedtquTtQ+CRNBoAt9GuV07c6KNHK1wCmlq8DFPwgiLF2rXwgSHX5Q==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
+  '@vueuse/shared@11.0.3':
+    resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -1003,6 +1018,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@vitejs/plugin-vue@5.1.3(vite@5.4.3(@types/node@22.5.4))(vue@3.5.2(typescript@5.5.4))':
     dependencies:
       vite: 5.4.3(@types/node@22.5.4)
@@ -1094,6 +1111,16 @@ snapshots:
 
   '@vue/shared@3.5.2': {}
 
+  '@vueuse/core@11.0.3(vue@3.5.2(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 11.0.3
+      '@vueuse/shared': 11.0.3(vue@3.5.2(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.5.2(typescript@5.5.4))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -1104,8 +1131,17 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@11.0.3': {}
+
   '@vueuse/metadata@9.13.0': {}
 
+  '@vueuse/shared@11.0.3(vue@3.5.2(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.5.2(typescript@5.5.4))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.4))
@@ -1410,7 +1446,7 @@ snapshots:
       - rollup
       - webpack-sources
 
-  unplugin-auto-import@0.18.2(@vueuse/core@9.13.0(vue@3.5.2(typescript@5.5.4)))(rollup@4.21.2):
+  unplugin-auto-import@0.18.2(@vueuse/core@11.0.3(vue@3.5.2(typescript@5.5.4)))(rollup@4.21.2):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
@@ -1421,7 +1457,7 @@ snapshots:
       unimport: 3.11.1(rollup@4.21.2)
       unplugin: 1.13.1
     optionalDependencies:
-      '@vueuse/core': 9.13.0(vue@3.5.2(typescript@5.5.4))
+      '@vueuse/core': 11.0.3(vue@3.5.2(typescript@5.5.4))
     transitivePeerDependencies:
       - rollup
       - webpack-sources
diff --git a/src/components/Demo.vue b/src/components/Demo.vue
index f8b586a..4c7c4e9 100644
--- a/src/components/Demo.vue
+++ b/src/components/Demo.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { useCounterStore } from '@/stores/counter';
 
+import { useDark, useToggle } from '@vueuse/core';
+const isDark = useDark();
+const toggleDark = useToggle(isDark);
 const store = useCounterStore();
 </script>
 
 <template>
   <el-button>我是 ElButton {{ store.count }}</el-button>
   <el-button @click="store.increment()">我是 ElButton </el-button>
+  <el-button @click="toggleDark()">切换 </el-button>
   <RouterLink to="/">Go to Home</RouterLink>
 
   <RouterLink to="/about">Go to About</RouterLink>
diff --git a/src/main.ts b/src/main.ts
index 8ebcb5a..c604b74 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,8 +5,10 @@ import { createMemoryHistory, createRouter } from 'vue-router';
 import App from './App.vue';
 import HelloWorld from './components/HelloWorld.vue';
 
+import 'element-plus/theme-chalk/dark/css-vars.css';
 import Demo from './components/Demo.vue';
 import './style.css';
+
 const i18n = createI18n({
   locale: 'zh',
   fallbackLocale: 'en',