diff --git a/packages/varlet-cli/site/utils.ts b/packages/varlet-cli/site/utils.ts
index b8c574cb752..b7d3dde22d2 100644
--- a/packages/varlet-cli/site/utils.ts
+++ b/packages/varlet-cli/site/utils.ts
@@ -1,7 +1,6 @@
 import { onMounted, onUnmounted } from 'vue'
 import { get } from 'lodash-es'
 import { formatStyleVars } from './components/utils/elements'
-import dark from '@varlet/ui/src/themes/dark'
 
 export * from './components/utils/components'
 export * from './components/utils/elements'
@@ -150,7 +149,7 @@ export function getBrowserThemes(): 'darkThemes' | 'themes' {
   return currentThemes
 }
 
-export function watchDarkMode(cb?: (themes: 'darkThemes' | 'themes') => void) {
+export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
   watchThemes((themes) => {
     StyleProvider(themes === 'darkThemes' ? dark : null)
 
diff --git a/packages/varlet-ui/src/action-sheet/example/index.vue b/packages/varlet-ui/src/action-sheet/example/index.vue
index 6cdbcf01825..88fdaf16761 100644
--- a/packages/varlet-ui/src/action-sheet/example/index.vue
+++ b/packages/varlet-ui/src/action-sheet/example/index.vue
@@ -29,6 +29,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarButton from '../../button'
 import Snackbar from '../../snackbar'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { ref, reactive, onUnmounted } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -163,7 +164,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/app-bar/example/index.vue b/packages/varlet-ui/src/app-bar/example/index.vue
index 1eed3f21f13..a31bed772cc 100644
--- a/packages/varlet-ui/src/app-bar/example/index.vue
+++ b/packages/varlet-ui/src/app-bar/example/index.vue
@@ -64,6 +64,7 @@ import Snackbar from '../../snackbar'
 import VarMenu from '../../menu'
 import VarButton from '../../button'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -112,7 +113,7 @@ export default {
       offsetY.value = false
     })
 
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       bgColor.value = themes === 'darkThemes' ? '#272727' : '#fff'
     })
 
diff --git a/packages/varlet-ui/src/back-top/example/index.vue b/packages/varlet-ui/src/back-top/example/index.vue
index 5d728606008..38aea46d635 100644
--- a/packages/varlet-ui/src/back-top/example/index.vue
+++ b/packages/varlet-ui/src/back-top/example/index.vue
@@ -8,6 +8,7 @@
 <script>
 import VarBackTop from '..'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
 import { watchDarkMode } from '@varlet/cli/site/utils'
 
 const lists = [...Array(100).keys()]
@@ -19,7 +20,7 @@ export default {
     VarCell,
   },
   setup() {
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       lists,
diff --git a/packages/varlet-ui/src/badge/example/index.vue b/packages/varlet-ui/src/badge/example/index.vue
index b38516c68f4..fb5b5821a22 100644
--- a/packages/varlet-ui/src/badge/example/index.vue
+++ b/packages/varlet-ui/src/badge/example/index.vue
@@ -59,6 +59,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarBadge from '..'
 import VarButton from '../../button'
 import VarChip from '../../chip'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -82,7 +83,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       value,
diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
index 9e83c99608b..fcb802a8601 100644
--- a/packages/varlet-ui/src/button/example/index.vue
+++ b/packages/varlet-ui/src/button/example/index.vue
@@ -66,6 +66,7 @@ import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Snackbar from '../../snackbar'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
@@ -86,7 +87,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
diff --git a/packages/varlet-ui/src/card/example/index.vue b/packages/varlet-ui/src/card/example/index.vue
index 857992e7505..2e3482212d3 100644
--- a/packages/varlet-ui/src/card/example/index.vue
+++ b/packages/varlet-ui/src/card/example/index.vue
@@ -31,6 +31,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarButton from '../../button'
 import VarCard from '..'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
@@ -44,7 +45,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
diff --git a/packages/varlet-ui/src/cell/example/index.vue b/packages/varlet-ui/src/cell/example/index.vue
index 32553903e2c..e3482943ee2 100644
--- a/packages/varlet-ui/src/cell/example/index.vue
+++ b/packages/varlet-ui/src/cell/example/index.vue
@@ -37,6 +37,7 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarIcon from '../../icon'
 import VarCell from '..'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -49,7 +50,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/checkbox-group/example/index.vue b/packages/varlet-ui/src/checkbox-group/example/index.vue
index 6d1b631e57b..4ef2c2d4d31 100644
--- a/packages/varlet-ui/src/checkbox-group/example/index.vue
+++ b/packages/varlet-ui/src/checkbox-group/example/index.vue
@@ -54,6 +54,7 @@ import VarCheckbox from '../../checkbox'
 import VarIcon from '../../icon'
 import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -81,7 +82,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/chip/example/index.vue b/packages/varlet-ui/src/chip/example/index.vue
index efdadf21316..e134b7ae285 100644
--- a/packages/varlet-ui/src/chip/example/index.vue
+++ b/packages/varlet-ui/src/chip/example/index.vue
@@ -66,6 +66,7 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarChip from '..'
 import VarIcon from '../../icon'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -82,7 +83,7 @@ export default {
     const show1 = ref(true)
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       show,
diff --git a/packages/varlet-ui/src/collapse/example/index.vue b/packages/varlet-ui/src/collapse/example/index.vue
index 67056bb9977..b923edf873c 100644
--- a/packages/varlet-ui/src/collapse/example/index.vue
+++ b/packages/varlet-ui/src/collapse/example/index.vue
@@ -54,6 +54,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarCollapse from '..'
 import VarCollapseItem from '../../collapse-item'
 import VarButton from '../../button'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -81,7 +82,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(values),
diff --git a/packages/varlet-ui/src/countdown/example/index.vue b/packages/varlet-ui/src/countdown/example/index.vue
index 383d23da940..434957fcdb2 100644
--- a/packages/varlet-ui/src/countdown/example/index.vue
+++ b/packages/varlet-ui/src/countdown/example/index.vue
@@ -39,6 +39,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarCountdown from '..'
 import Snackbar from '../../snackbar'
 import VarButton from '../../button'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -63,7 +64,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       time,
diff --git a/packages/varlet-ui/src/counter/example/index.vue b/packages/varlet-ui/src/counter/example/index.vue
index 3de45fe0fdf..ad88a048747 100644
--- a/packages/varlet-ui/src/counter/example/index.vue
+++ b/packages/varlet-ui/src/counter/example/index.vue
@@ -32,6 +32,7 @@
 <script>
 import VarCounter from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -62,7 +63,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/date-picker/example/index.vue b/packages/varlet-ui/src/date-picker/example/index.vue
index 94aa13400f9..e300242f1d4 100644
--- a/packages/varlet-ui/src/date-picker/example/index.vue
+++ b/packages/varlet-ui/src/date-picker/example/index.vue
@@ -44,9 +44,10 @@
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarDatePicker from '..'
+import dark from '../../themes/dark'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -77,7 +78,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(dates),
diff --git a/packages/varlet-ui/src/date-picker/src/panel-header.vue b/packages/varlet-ui/src/date-picker/src/panel-header.vue
index 73ea9ae5989..4735bbbfa44 100644
--- a/packages/varlet-ui/src/date-picker/src/panel-header.vue
+++ b/packages/varlet-ui/src/date-picker/src/panel-header.vue
@@ -31,6 +31,7 @@
 <script lang="ts">
 import VarButton from '../../button'
 import VarIcon from '../../icon'
+import dark from '../../themes/dark'
 import { defineComponent, ref, computed, watch } from 'vue'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
index 6d00c7dd83b..83efa448766 100644
--- a/packages/varlet-ui/src/dialog/example/index.vue
+++ b/packages/varlet-ui/src/dialog/example/index.vue
@@ -39,6 +39,7 @@ import VarIcon from '../../icon'
 import Snackbar from '../../snackbar'
 import VarCell from '../../cell'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -105,7 +106,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/divider/example/index.vue b/packages/varlet-ui/src/divider/example/index.vue
index 0996a90733a..594a43f66f2 100644
--- a/packages/varlet-ui/src/divider/example/index.vue
+++ b/packages/varlet-ui/src/divider/example/index.vue
@@ -39,6 +39,7 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarDivider from '..'
 import VarIcon from '../../icon'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -51,7 +52,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
index 26877258b4b..602a59a0208 100644
--- a/packages/varlet-ui/src/form/example/index.vue
+++ b/packages/varlet-ui/src/form/example/index.vue
@@ -82,6 +82,7 @@ import VarCounter from '../../counter'
 import VarRate from '../../rate'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { onUnmounted, reactive, ref } from 'vue'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -138,7 +139,7 @@ export default {
       use(lang)
       form.value?.reset()
     })
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/icon/example/index.vue b/packages/varlet-ui/src/icon/example/index.vue
index 91833aae3ec..f253b9e58b1 100644
--- a/packages/varlet-ui/src/icon/example/index.vue
+++ b/packages/varlet-ui/src/icon/example/index.vue
@@ -52,6 +52,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import context from '../../context'
 import Clipboard from 'clipboard'
 import icons from '@varlet/icons'
+import dark from '../../themes/dark'
 import { reactive, onMounted, ref, onUnmounted } from 'vue'
 import { use, pack } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -83,7 +84,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       background.value = themes === 'darkThemes' ? '#272727' : '#fff'
     })
 
diff --git a/packages/varlet-ui/src/index-bar/example/index.vue b/packages/varlet-ui/src/index-bar/example/index.vue
index f5914c62f87..9d50326d0dd 100644
--- a/packages/varlet-ui/src/index-bar/example/index.vue
+++ b/packages/varlet-ui/src/index-bar/example/index.vue
@@ -11,10 +11,11 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue'
 import VarIndexAnchor from '../../index-anchor/IndexAnchor.vue'
 import VarIndexBar from '..'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
+import { ref, onMounted } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -41,7 +42,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       bgColor.value = themes === 'darkThemes' ? 'rgb(41 42 45)' : '#e7edf7'
       color.value = themes === 'darkThemes' ? '#3980e8' : '#2e67ba'
     })
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
index 05eb2520105..de485eab4ca 100644
--- a/packages/varlet-ui/src/input/example/index.vue
+++ b/packages/varlet-ui/src/input/example/index.vue
@@ -40,6 +40,7 @@
 import VarInput from '..'
 import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { use, pack } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -68,7 +69,7 @@ export default {
       use(lang)
       values.value5 = pack.value.clearableText
     })
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/list/example/index.vue b/packages/varlet-ui/src/list/example/index.vue
index c18d47149e3..5f5e3c403aa 100644
--- a/packages/varlet-ui/src/list/example/index.vue
+++ b/packages/varlet-ui/src/list/example/index.vue
@@ -38,6 +38,7 @@ import VarTabs from '../../tabs'
 import VarTab from '../../tab'
 import VarTabsItems from '../../tabs-items'
 import VarTabItem from '../../tab-item'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -68,7 +69,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
index a8946928f3e..4aa9b4a8d2c 100644
--- a/packages/varlet-ui/src/menu/example/index.vue
+++ b/packages/varlet-ui/src/menu/example/index.vue
@@ -114,6 +114,7 @@ import context from '../../context'
 import { onUnmounted, reactive, toRefs, ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
+import dark from '../../themes/dark'
 
 export default {
   name: 'MenuExample',
@@ -136,7 +137,7 @@ export default {
     const bgColor = ref('#fff')
 
     watchLang(use)
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       bgColor.value = themes === 'darkThemes' ? '#272727' : '#fff'
     })
 
diff --git a/packages/varlet-ui/src/pagination/example/Basic.vue b/packages/varlet-ui/src/pagination/example/Basic.vue
index 97f987fa4f9..f2f8b04a19a 100644
--- a/packages/varlet-ui/src/pagination/example/Basic.vue
+++ b/packages/varlet-ui/src/pagination/example/Basic.vue
@@ -4,6 +4,7 @@
 
 <script>
 import VarPagination from '../Pagination'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { pack, use } from './locale'
 
@@ -14,7 +15,7 @@ export default {
   },
   setup() {
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/pagination/example/Disabled.vue b/packages/varlet-ui/src/pagination/example/Disabled.vue
index eec03db270c..ffe9a277520 100644
--- a/packages/varlet-ui/src/pagination/example/Disabled.vue
+++ b/packages/varlet-ui/src/pagination/example/Disabled.vue
@@ -4,6 +4,7 @@
 
 <script>
 import VarPagination from '../Pagination'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { pack, use } from './locale'
 
@@ -14,7 +15,7 @@ export default {
   },
   setup() {
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/pagination/example/QuickJumper.vue b/packages/varlet-ui/src/pagination/example/QuickJumper.vue
index 4c6362ec516..c8a8c83607b 100644
--- a/packages/varlet-ui/src/pagination/example/QuickJumper.vue
+++ b/packages/varlet-ui/src/pagination/example/QuickJumper.vue
@@ -4,6 +4,7 @@
 
 <script>
 import VarPagination from '../Pagination'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { pack, use } from './locale'
 
@@ -14,7 +15,7 @@ export default {
   },
   setup() {
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/pagination/example/ShowTotal.vue b/packages/varlet-ui/src/pagination/example/ShowTotal.vue
index 0d594232c1f..ed35993e8e2 100644
--- a/packages/varlet-ui/src/pagination/example/ShowTotal.vue
+++ b/packages/varlet-ui/src/pagination/example/ShowTotal.vue
@@ -17,6 +17,7 @@
 
 <script>
 import VarPagination from '../Pagination'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { pack, use } from './locale'
 
@@ -27,7 +28,7 @@ export default {
   },
   setup() {
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/pagination/example/SizeOption.vue b/packages/varlet-ui/src/pagination/example/SizeOption.vue
index 5cb2c892cbe..5a870059759 100644
--- a/packages/varlet-ui/src/pagination/example/SizeOption.vue
+++ b/packages/varlet-ui/src/pagination/example/SizeOption.vue
@@ -5,6 +5,7 @@
 
 <script>
 import VarPagination from '../Pagination'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { pack, use } from './locale'
 
@@ -15,7 +16,7 @@ export default {
   },
   setup() {
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/pagination/example/index.vue b/packages/varlet-ui/src/pagination/example/index.vue
index e5fdb6b30b8..8e79ab10786 100644
--- a/packages/varlet-ui/src/pagination/example/index.vue
+++ b/packages/varlet-ui/src/pagination/example/index.vue
@@ -20,6 +20,7 @@
 <script>
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarPagination from '..'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
 
@@ -31,7 +32,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/picker/example/index.vue b/packages/varlet-ui/src/picker/example/index.vue
index b5078a975f9..48103c34a7c 100644
--- a/packages/varlet-ui/src/picker/example/index.vue
+++ b/packages/varlet-ui/src/picker/example/index.vue
@@ -16,6 +16,7 @@ import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import area from '../../../json/area.json'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { onUnmounted, ref } from 'vue'
 import { use, pack } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -54,7 +55,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
diff --git a/packages/varlet-ui/src/popup/example/index.vue b/packages/varlet-ui/src/popup/example/index.vue
index a5e102aa169..594cf93a359 100644
--- a/packages/varlet-ui/src/popup/example/index.vue
+++ b/packages/varlet-ui/src/popup/example/index.vue
@@ -55,6 +55,7 @@ import VarButton from '../../button'
 import Snackbar from '../../snackbar'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { onUnmounted, reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
@@ -79,7 +80,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
index 46f401e8d98..122cdb2b36b 100644
--- a/packages/varlet-ui/src/progress/example/index.vue
+++ b/packages/varlet-ui/src/progress/example/index.vue
@@ -42,6 +42,7 @@
 <script>
 import VarProgress from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -64,7 +65,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     onUnmounted(() => {
       window.clearInterval(interval.value)
diff --git a/packages/varlet-ui/src/pull-refresh/example/index.vue b/packages/varlet-ui/src/pull-refresh/example/index.vue
index e88a6949857..ad35cbb046a 100644
--- a/packages/varlet-ui/src/pull-refresh/example/index.vue
+++ b/packages/varlet-ui/src/pull-refresh/example/index.vue
@@ -7,6 +7,7 @@
 <script>
 import VarPullRefresh from '..'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
 import { onMounted, ref, onBeforeUnmount } from 'vue'
 import { watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -42,7 +43,7 @@ export default {
       document.body.removeEventListener('touchmove', prevent)
     })
 
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       refresh,
diff --git a/packages/varlet-ui/src/radio-group/example/index.vue b/packages/varlet-ui/src/radio-group/example/index.vue
index 3d584149070..d78db8dc105 100644
--- a/packages/varlet-ui/src/radio-group/example/index.vue
+++ b/packages/varlet-ui/src/radio-group/example/index.vue
@@ -49,6 +49,7 @@ import VarRadioGroup from '..'
 import VarRadio from '../../radio'
 import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
+import dark from '../../themes/dark'
 import { toRefs, reactive } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -74,7 +75,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/rate/example/index.vue b/packages/varlet-ui/src/rate/example/index.vue
index 3520290d73b..7d1a32a3a9b 100644
--- a/packages/varlet-ui/src/rate/example/index.vue
+++ b/packages/varlet-ui/src/rate/example/index.vue
@@ -59,6 +59,7 @@ import VarRate from '..'
 import VarSnackbar from '../../snackbar'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { onUnmounted, reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -103,7 +104,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       handleChange,
diff --git a/packages/varlet-ui/src/select/example/index.vue b/packages/varlet-ui/src/select/example/index.vue
index 8f3b0e14ba6..f14ca272897 100644
--- a/packages/varlet-ui/src/select/example/index.vue
+++ b/packages/varlet-ui/src/select/example/index.vue
@@ -94,6 +94,7 @@ import VarSelect from '..'
 import VarOption from '../../option'
 import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -136,7 +137,7 @@ export default {
       values.value11 = undefined
     })
 
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/skeleton/example/index.vue b/packages/varlet-ui/src/skeleton/example/index.vue
index 9fe643c2607..421d0dfc8e8 100644
--- a/packages/varlet-ui/src/skeleton/example/index.vue
+++ b/packages/varlet-ui/src/skeleton/example/index.vue
@@ -31,6 +31,7 @@
 import VarSkeleton from '..'
 import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -47,7 +48,7 @@ export default {
     const fullscreenLoading = ref(false)
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue
index c45682f8daa..1a331f783fb 100644
--- a/packages/varlet-ui/src/slider/example/index.vue
+++ b/packages/varlet-ui/src/slider/example/index.vue
@@ -58,6 +58,7 @@
 import { reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarSlider from '..'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -87,7 +88,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(values),
diff --git a/packages/varlet-ui/src/snackbar/example/index.vue b/packages/varlet-ui/src/snackbar/example/index.vue
index e92bce571b7..75aa4085caa 100644
--- a/packages/varlet-ui/src/snackbar/example/index.vue
+++ b/packages/varlet-ui/src/snackbar/example/index.vue
@@ -60,6 +60,7 @@ import Snackbar from '../index'
 import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { onUnmounted, reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -116,7 +117,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
diff --git a/packages/varlet-ui/src/space/example/index.vue b/packages/varlet-ui/src/space/example/index.vue
index 26f2a0d1769..05ee47ccc3f 100644
--- a/packages/varlet-ui/src/space/example/index.vue
+++ b/packages/varlet-ui/src/space/example/index.vue
@@ -49,6 +49,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarSpace from '..'
 import VarButton from '../../button'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
@@ -57,7 +58,7 @@ export default {
   components: { VarSpace, VarButton, AppType },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {
diff --git a/packages/varlet-ui/src/steps/example/index.vue b/packages/varlet-ui/src/steps/example/index.vue
index ec3b8b7ea2a..59e799848ee 100644
--- a/packages/varlet-ui/src/steps/example/index.vue
+++ b/packages/varlet-ui/src/steps/example/index.vue
@@ -29,6 +29,7 @@ import VarSteps from '..'
 import VarStep from '../../step'
 import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -49,7 +50,7 @@ export default {
 
     watchLang(use)
 
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/switch/example/index.vue b/packages/varlet-ui/src/switch/example/index.vue
index abc1f66e46d..957918e5752 100644
--- a/packages/varlet-ui/src/switch/example/index.vue
+++ b/packages/varlet-ui/src/switch/example/index.vue
@@ -31,6 +31,7 @@
 <script>
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarSwitch from '..'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -51,7 +52,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(values),
diff --git a/packages/varlet-ui/src/tab-item/example/index.vue b/packages/varlet-ui/src/tab-item/example/index.vue
index 859b182f4a1..91993171645 100644
--- a/packages/varlet-ui/src/tab-item/example/index.vue
+++ b/packages/varlet-ui/src/tab-item/example/index.vue
@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import VarTabItem from '..'
+import dark from '../../themes/dark'
 import { defineComponent } from 'vue'
 import { watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -13,7 +14,7 @@ export default defineComponent({
     VarTabItem,
   },
   setup() {
-    watchDarkMode()
+    watchDarkMode(dark)
   },
 })
 </script>
diff --git a/packages/varlet-ui/src/table/example/Basic.vue b/packages/varlet-ui/src/table/example/Basic.vue
index a8e62a9aabf..9e6b4fb4d7d 100644
--- a/packages/varlet-ui/src/table/example/Basic.vue
+++ b/packages/varlet-ui/src/table/example/Basic.vue
@@ -24,6 +24,7 @@
 
 <script>
 import VarTable from '..'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
 
@@ -34,7 +35,7 @@ export default {
   },
   setup() {
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/table/example/FooterSlots.vue b/packages/varlet-ui/src/table/example/FooterSlots.vue
index 366744aadd6..0f5ebfa00cb 100644
--- a/packages/varlet-ui/src/table/example/FooterSlots.vue
+++ b/packages/varlet-ui/src/table/example/FooterSlots.vue
@@ -26,6 +26,7 @@
 <script>
 import VarTable from '..'
 import VarPagination from '../../pagination'
+import dark from '../../themes/dark'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
 import { gen } from './index'
@@ -45,7 +46,7 @@ export default {
     }
 
     watchLang(use, 'pc')
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/table/example/index.vue b/packages/varlet-ui/src/table/example/index.vue
index 60c4be632db..d0073c08370 100644
--- a/packages/varlet-ui/src/table/example/index.vue
+++ b/packages/varlet-ui/src/table/example/index.vue
@@ -51,6 +51,7 @@
 import Table from '..'
 import Pagination from '../../pagination'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -95,7 +96,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,
diff --git a/packages/varlet-ui/src/tabs-items/example/index.vue b/packages/varlet-ui/src/tabs-items/example/index.vue
index be1f9ceab9a..b5986ca7f97 100644
--- a/packages/varlet-ui/src/tabs-items/example/index.vue
+++ b/packages/varlet-ui/src/tabs-items/example/index.vue
@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import VarTabsItems from '..'
+import dark from '../../themes/dark'
 import { defineComponent } from 'vue'
 import { watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -13,7 +14,7 @@ export default defineComponent({
     VarTabsItems,
   },
   setup() {
-    watchDarkMode()
+    watchDarkMode(dark)
   },
 })
 </script>
diff --git a/packages/varlet-ui/src/tabs/example/index.vue b/packages/varlet-ui/src/tabs/example/index.vue
index a6cf1043277..3f8e2707b64 100644
--- a/packages/varlet-ui/src/tabs/example/index.vue
+++ b/packages/varlet-ui/src/tabs/example/index.vue
@@ -141,6 +141,7 @@ import VarIcon from '../../icon'
 import VarTabsItems from '../../tabs-items'
 import VarTabItem from '../../tab-item'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { use, pack } from './locale'
 import { computed, onUnmounted, reactive, ref, toRefs } from 'vue'
 import { watchPlatform, watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -174,7 +175,7 @@ export default {
     }))
 
     watchLang(use)
-    watchDarkMode((mode) => {
+    watchDarkMode(dark, (mode) => {
       themes.value = mode
     })
 
diff --git a/packages/varlet-ui/src/time-picker/example/index.vue b/packages/varlet-ui/src/time-picker/example/index.vue
index 065fd4a10ce..9068ee707e6 100644
--- a/packages/varlet-ui/src/time-picker/example/index.vue
+++ b/packages/varlet-ui/src/time-picker/example/index.vue
@@ -44,6 +44,7 @@
 import { reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarTimePicker from '..'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -80,7 +81,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(dates),
diff --git a/packages/varlet-ui/src/uploader/example/index.vue b/packages/varlet-ui/src/uploader/example/index.vue
index d9688889ca1..ae32ea2cea9 100644
--- a/packages/varlet-ui/src/uploader/example/index.vue
+++ b/packages/varlet-ui/src/uploader/example/index.vue
@@ -42,6 +42,7 @@ import VarUploader from '..'
 import VarButton from '../../button'
 import Dialog from '../../dialog'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -128,7 +129,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,