From 83ec32ad2b8ba2caa3961dd13e3a5fe656039645 Mon Sep 17 00:00:00 2001
From: LoTwT <709937065@qq.com>
Date: Mon, 29 Jan 2024 12:51:16 +0800
Subject: [PATCH 1/9] fix: detect vitepress theme key

---
 packages/client/src/App.vue        |  6 +++++-
 packages/client/src/utils/index.ts |  1 +
 packages/client/src/utils/theme.ts | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/utils/theme.ts

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 4e4050eab..1149ed5d2 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -3,11 +3,15 @@ import type { Ref } from 'vue'
 import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
 import { isInChromePanel } from '@vue/devtools-shared'
 import { Pane, Splitpanes } from 'splitpanes'
+import { getThemeKey } from './utils'
 
 import('./setup/unocss-runtime')
 
 // @TODO: fix browser extension cross-origin localStorage issue
-useColorMode()
+
+useColorMode({
+  storageKey: getThemeKey(),
+})
 const router = useRouter()
 const route = useRoute()
 const { connected, clientConnected } = useDevToolsState()
diff --git a/packages/client/src/utils/index.ts b/packages/client/src/utils/index.ts
index 4b3a1e85d..3c3866eaf 100644
--- a/packages/client/src/utils/index.ts
+++ b/packages/client/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './color'
 export * from './time'
+export * from './theme'
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
new file mode 100644
index 000000000..e3e40c253
--- /dev/null
+++ b/packages/client/src/utils/theme.ts
@@ -0,0 +1,19 @@
+export const ThemeStorageKeys = {
+  default: 'vueuse-color-scheme',
+  vitepress: 'vitepress-theme-appearance',
+}
+
+export function getThemeKey() {
+  let themeKey = ThemeStorageKeys.default
+
+  const nonDefaultKeys = Object
+    .values(ThemeStorageKeys)
+    .filter(key => key !== ThemeStorageKeys.default)
+
+  const resultKey = nonDefaultKeys.find(key => useLocalStorage(key, undefined).value)
+
+  if (resultKey)
+    themeKey = resultKey
+
+  return themeKey
+}

From 390ab41a3ccc3c7f315c45fa785752566ba5801f Mon Sep 17 00:00:00 2001
From: LoTwT <709937065@qq.com>
Date: Mon, 29 Jan 2024 13:27:51 +0800
Subject: [PATCH 2/9] chore: add DarkToggle in playground

---
 packages/playground/basic/src/App.vue                |  5 ++++-
 .../playground/basic/src/components/DarkToggle.vue   | 12 ++++++++++++
 packages/playground/basic/src/style.css              | 10 ++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 packages/playground/basic/src/components/DarkToggle.vue

diff --git a/packages/playground/basic/src/App.vue b/packages/playground/basic/src/App.vue
index 07eb3ee79..60bdef99e 100644
--- a/packages/playground/basic/src/App.vue
+++ b/packages/playground/basic/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+import DarkToggle from './components/DarkToggle.vue'
 </script>
 
 <template>
@@ -27,5 +27,8 @@
         </span>
       </RouterLink>
     </div>
+    <div text-center>
+      <DarkToggle />
+    </div>
   </div>
 </template>
diff --git a/packages/playground/basic/src/components/DarkToggle.vue b/packages/playground/basic/src/components/DarkToggle.vue
new file mode 100644
index 000000000..5e49a60a4
--- /dev/null
+++ b/packages/playground/basic/src/components/DarkToggle.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+
+const isDark = useDark()
+</script>
+
+<template>
+  <button @click="isDark = !isDark">
+    toggle dark mode
+  </button>
+  <div>isDark: {{ isDark }}</div>
+</template>
diff --git a/packages/playground/basic/src/style.css b/packages/playground/basic/src/style.css
index f0a3c1807..917220773 100644
--- a/packages/playground/basic/src/style.css
+++ b/packages/playground/basic/src/style.css
@@ -4,9 +4,9 @@
   line-height: 24px;
   font-weight: 400;
 
-  color-scheme: light dark;
+  /* color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #242424; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -14,3 +14,9 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
+html.dark {
+  color-scheme: dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}

From cd9ee5efe64190169bf101c66cf2411034dab6ef Mon Sep 17 00:00:00 2001
From: LoTwT <709937065@qq.com>
Date: Fri, 1 Mar 2024 13:44:12 +0800
Subject: [PATCH 3/9] feat(ui): add useTheme composable

---
 packages/client/src/App.vue                   |  6 ++---
 .../src/components/chrome/ViewModeSwitch.vue  |  4 ++--
 .../src/components/common/IframeView.vue      |  4 +++-
 packages/client/src/utils/index.ts            |  1 -
 packages/client/src/utils/theme.ts            | 19 ----------------
 packages/overlay/src/App.vue                  |  4 ++--
 packages/ui/src/components/DarkToggle.vue     |  5 +++--
 packages/ui/src/composables/index.ts          |  1 +
 packages/ui/src/composables/theme.ts          | 22 +++++++++++++++++++
 9 files changed, 35 insertions(+), 31 deletions(-)
 delete mode 100644 packages/client/src/utils/theme.ts
 create mode 100644 packages/ui/src/composables/theme.ts

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 1149ed5d2..d7f3180f5 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -3,15 +3,13 @@ import type { Ref } from 'vue'
 import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
 import { isInChromePanel } from '@vue/devtools-shared'
 import { Pane, Splitpanes } from 'splitpanes'
-import { getThemeKey } from './utils'
+import { useTheme } from '@vue/devtools-ui'
 
 import('./setup/unocss-runtime')
 
 // @TODO: fix browser extension cross-origin localStorage issue
 
-useColorMode({
-  storageKey: getThemeKey(),
-})
+useTheme()
 const router = useRouter()
 const route = useRoute()
 const { connected, clientConnected } = useDevToolsState()
diff --git a/packages/client/src/components/chrome/ViewModeSwitch.vue b/packages/client/src/components/chrome/ViewModeSwitch.vue
index 1a7b294e8..34f4cb244 100644
--- a/packages/client/src/components/chrome/ViewModeSwitch.vue
+++ b/packages/client/src/components/chrome/ViewModeSwitch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VueButton } from '@vue/devtools-ui'
+import { VueButton, useTheme } from '@vue/devtools-ui'
 
-useColorMode()
+useTheme()
 
 const { toggle } = useToggleViewMode()
 </script>
diff --git a/packages/client/src/components/common/IframeView.vue b/packages/client/src/components/common/IframeView.vue
index 0979b02e8..4c5653bb4 100644
--- a/packages/client/src/components/common/IframeView.vue
+++ b/packages/client/src/components/common/IframeView.vue
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { useTheme } from '@vue/devtools-ui'
+
 const iframeCacheMap = new Map<string, HTMLIFrameElement>()
 </script>
 
@@ -7,7 +9,7 @@ const props = defineProps<{
   src: string
 }>()
 
-const colorMode = useColorMode()
+const colorMode = useTheme()
 const anchor = ref<HTMLDivElement>()
 const key = computed(() => props.src)
 const iframeEl = ref<HTMLIFrameElement>()
diff --git a/packages/client/src/utils/index.ts b/packages/client/src/utils/index.ts
index 3c3866eaf..4b3a1e85d 100644
--- a/packages/client/src/utils/index.ts
+++ b/packages/client/src/utils/index.ts
@@ -1,3 +1,2 @@
 export * from './color'
 export * from './time'
-export * from './theme'
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
deleted file mode 100644
index e3e40c253..000000000
--- a/packages/client/src/utils/theme.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const ThemeStorageKeys = {
-  default: 'vueuse-color-scheme',
-  vitepress: 'vitepress-theme-appearance',
-}
-
-export function getThemeKey() {
-  let themeKey = ThemeStorageKeys.default
-
-  const nonDefaultKeys = Object
-    .values(ThemeStorageKeys)
-    .filter(key => key !== ThemeStorageKeys.default)
-
-  const resultKey = nonDefaultKeys.find(key => useLocalStorage(key, undefined).value)
-
-  if (resultKey)
-    themeKey = resultKey
-
-  return themeKey
-}
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index f92568258..2887ed5b2 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useColorMode } from '@vueuse/core'
 import { Bridge, getDevToolsClientUrl, prepareInjection } from '@vue/devtools-core'
 import { target } from '@vue/devtools-shared'
 import { devtools, onDevToolsConnected } from '@vue/devtools-kit'
+import { useTheme } from '@vue/devtools-ui'
 import { registerBridge, useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
 import { checkIsSafari } from '~/utils'
 import Frame from '~/components/FrameBox.vue'
 
 type ViewMode = 'xs' | 'default' | 'fullscreen'
 const panelEle = ref<HTMLDivElement>()
-const mode = useColorMode()
+const mode = useTheme()
 const panelState = ref<{
   viewMode: ViewMode
 }>({
diff --git a/packages/ui/src/components/DarkToggle.vue b/packages/ui/src/components/DarkToggle.vue
index 725b9c0b5..e4dc84f50 100644
--- a/packages/ui/src/components/DarkToggle.vue
+++ b/packages/ui/src/components/DarkToggle.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick } from 'vue'
-import { useColorMode, useVModel } from '@vueuse/core'
+import { useVModel } from '@vueuse/core'
+import { useTheme } from '../composables/theme'
 
 const props = withDefaults(defineProps<{
   isDark?: boolean
@@ -14,7 +15,7 @@ const props = withDefaults(defineProps<{
 
 const isDarkModel = useVModel(props, 'isDark')
 
-const mode = useColorMode({
+const mode = useTheme({
   initialValue: isDarkModel.value ? 'dark' : 'light',
   onChanged: (value) => {
     isDarkModel.value = value === 'dark'
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 273c06ba8..e72658db4 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -1,2 +1,3 @@
 export * from './notification'
 export type * from './notification'
+export * from './theme'
diff --git a/packages/ui/src/composables/theme.ts b/packages/ui/src/composables/theme.ts
new file mode 100644
index 000000000..c77f61b52
--- /dev/null
+++ b/packages/ui/src/composables/theme.ts
@@ -0,0 +1,22 @@
+import { BasicColorMode, UseColorModeOptions, useColorMode, useLocalStorage } from '@vueuse/core'
+
+/**
+ * priorites following the desc order
+ */
+export const ThemeStroageKeys = {
+  vitepress: 'vitepress-theme-appearance',
+  default: 'vueuse-color-scheme',
+}
+
+export function useTheme<T extends string = BasicColorMode>(options?: UseColorModeOptions<T>) {
+  options = options || {}
+
+  if (!options?.storageKey) {
+    const keys = Object.values(ThemeStroageKeys)
+    options.storageKey = keys.find(k => !!useLocalStorage(k, undefined).value)
+  }
+
+  const colorMode = useColorMode(options)
+
+  return colorMode
+}

From dda085e2f13f7df98acdd2d85fd64e1de896f2ae Mon Sep 17 00:00:00 2001
From: LoTwT <709937065@qq.com>
Date: Fri, 1 Mar 2024 13:44:43 +0800
Subject: [PATCH 4/9] chore: lint

---
 docs/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/package.json b/docs/package.json
index 589910030..af4893748 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,6 +11,7 @@
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.9.0",
     "unplugin-vue-components": "^0.26.0",
+    "vite-plugin-vue-devtools": "workspace:*",
     "vitepress": "1.0.0-rc.44",
     "vue": "^3.4.21"
   }

From 38724440a7f9741ddb6e00f6195c33763b416e8b Mon Sep 17 00:00:00 2001
From: Lo <l709937065@gmail.com>
Date: Mon, 4 Mar 2024 16:58:04 +0800
Subject: [PATCH 5/9] refactor(ui): replace useLocalStorage to
 localStorage.getItem

---
 packages/ui/src/composables/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/composables/theme.ts b/packages/ui/src/composables/theme.ts
index c77f61b52..238129882 100644
--- a/packages/ui/src/composables/theme.ts
+++ b/packages/ui/src/composables/theme.ts
@@ -1,4 +1,4 @@
-import { BasicColorMode, UseColorModeOptions, useColorMode, useLocalStorage } from '@vueuse/core'
+import { BasicColorMode, UseColorModeOptions, useColorMode } from '@vueuse/core'
 
 /**
  * priorites following the desc order
@@ -13,7 +13,7 @@ export function useTheme<T extends string = BasicColorMode>(options?: UseColorMo
 
   if (!options?.storageKey) {
     const keys = Object.values(ThemeStroageKeys)
-    options.storageKey = keys.find(k => !!useLocalStorage(k, undefined).value)
+    options.storageKey = keys.find(k => !!localStorage.getItem(k))
   }
 
   const colorMode = useColorMode(options)

From f3416c39f9b90e66ad13cad9a93bda732281950b Mon Sep 17 00:00:00 2001
From: Lo <l709937065@gmail.com>
Date: Mon, 4 Mar 2024 17:06:02 +0800
Subject: [PATCH 6/9] chore: remove useless deps and blank row

---
 docs/package.json           | 1 -
 packages/client/src/App.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index af4893748..589910030 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,7 +11,6 @@
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.9.0",
     "unplugin-vue-components": "^0.26.0",
-    "vite-plugin-vue-devtools": "workspace:*",
     "vitepress": "1.0.0-rc.44",
     "vue": "^3.4.21"
   }
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index d7f3180f5..c85a10ef4 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -8,7 +8,6 @@ import { useTheme } from '@vue/devtools-ui'
 import('./setup/unocss-runtime')
 
 // @TODO: fix browser extension cross-origin localStorage issue
-
 useTheme()
 const router = useRouter()
 const route = useRoute()

From c54090b04784f405e38f478018d2d948dcb9626d Mon Sep 17 00:00:00 2001
From: Lo <l709937065@gmail.com>
Date: Tue, 5 Mar 2024 09:17:54 +0800
Subject: [PATCH 7/9] chore: remove verbose DarkToggle in playground/basic

---
 packages/playground/basic/src/App.vue                |  4 ----
 .../playground/basic/src/components/DarkToggle.vue   | 12 ------------
 packages/playground/basic/src/style.css              | 10 ++--------
 3 files changed, 2 insertions(+), 24 deletions(-)
 delete mode 100644 packages/playground/basic/src/components/DarkToggle.vue

diff --git a/packages/playground/basic/src/App.vue b/packages/playground/basic/src/App.vue
index 60bdef99e..c6ff878ae 100644
--- a/packages/playground/basic/src/App.vue
+++ b/packages/playground/basic/src/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import DarkToggle from './components/DarkToggle.vue'
 </script>
 
 <template>
@@ -27,8 +26,5 @@ import DarkToggle from './components/DarkToggle.vue'
         </span>
       </RouterLink>
     </div>
-    <div text-center>
-      <DarkToggle />
-    </div>
   </div>
 </template>
diff --git a/packages/playground/basic/src/components/DarkToggle.vue b/packages/playground/basic/src/components/DarkToggle.vue
deleted file mode 100644
index 5e49a60a4..000000000
--- a/packages/playground/basic/src/components/DarkToggle.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { useDark } from '@vueuse/core'
-
-const isDark = useDark()
-</script>
-
-<template>
-  <button @click="isDark = !isDark">
-    toggle dark mode
-  </button>
-  <div>isDark: {{ isDark }}</div>
-</template>
diff --git a/packages/playground/basic/src/style.css b/packages/playground/basic/src/style.css
index 917220773..f0a3c1807 100644
--- a/packages/playground/basic/src/style.css
+++ b/packages/playground/basic/src/style.css
@@ -4,9 +4,9 @@
   line-height: 24px;
   font-weight: 400;
 
-  /* color-scheme: light dark;
+  color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424; */
+  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -14,9 +14,3 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
-
-html.dark {
-  color-scheme: dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-}

From 6f280e9b1df87db78fcfd4bfbc614bd7a304fd0e Mon Sep 17 00:00:00 2001
From: Lo <l709937065@gmail.com>
Date: Tue, 5 Mar 2024 09:20:10 +0800
Subject: [PATCH 8/9] chore: restore

---
 packages/playground/basic/src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/playground/basic/src/App.vue b/packages/playground/basic/src/App.vue
index c6ff878ae..07eb3ee79 100644
--- a/packages/playground/basic/src/App.vue
+++ b/packages/playground/basic/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 </script>
 
 <template>

From 3727bab57641af7be4f016805a269d30c3b3d35d Mon Sep 17 00:00:00 2001
From: Lo <l709937065@gmail.com>
Date: Mon, 11 Mar 2024 18:01:04 +0800
Subject: [PATCH 9/9] feat: add checkIsVitepress and theme-sync after devtools
 connected

---
 packages/overlay/src/App.vue         | 12 +++++++++---
 packages/shared/src/constants.ts     |  5 +++++
 packages/shared/src/env.ts           | 19 +++++++++++++++++++
 packages/ui/package.json             |  1 +
 packages/ui/src/composables/theme.ts | 13 +++----------
 pnpm-lock.yaml                       |  3 +++
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 2887ed5b2..1cbaf5453 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -10,14 +10,15 @@ import Frame from '~/components/FrameBox.vue'
 
 type ViewMode = 'xs' | 'default' | 'fullscreen'
 const panelEle = ref<HTMLDivElement>()
-const mode = useTheme()
+const modeValue = ref('light')
+const isConnected = ref(false)
 const panelState = ref<{
   viewMode: ViewMode
 }>({
   viewMode: 'default',
 })
 const cssVars = computed(() => {
-  const dark = mode.value === 'dark'
+  const dark = modeValue.value === 'dark'
   return {
     '--vue-devtools-widget-bg': dark ? '#111' : '#ffffff',
     '--vue-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
@@ -76,6 +77,11 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
 const vueInspector = ref()
 
 onDevToolsConnected(() => {
+  useTheme({
+    onChanged: v => modeValue.value = v,
+  })
+  isConnected.value = true
+
   devtools.api.getVueInspector().then((inspector) => {
     vueInspector.value = inspector
   })
@@ -97,7 +103,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
 
 <template>
   <div
-    v-show="state.preferShowFloatingPanel ? overlayVisible : panelVisible"
+    v-show="(state.preferShowFloatingPanel ? overlayVisible : panelVisible) && isConnected"
     class="vue-devtools__anchor" :style="[anchorStyle, cssVars]" :class="{
       'vue-devtools__anchor--vertical': isVertical,
       'vue-devtools__anchor--hide': isHidden,
diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts
index 2a62c99c8..3a22e8e28 100644
--- a/packages/shared/src/constants.ts
+++ b/packages/shared/src/constants.ts
@@ -2,3 +2,8 @@ export const VIEW_MODE_STORAGE_KEY = '__vue-devtools-view-mode__'
 export const VITE_PLUGIN_DETECTED_STORAGE_KEY = '__vue-devtools-vite-plugin-detected__'
 export const VITE_PLUGIN_CLIENT_URL_STORAGE_KEY = '__vue-devtools-vite-plugin-client-url__'
 export const BROADCAST_CHANNEL_NAME = '__vue-devtools-broadcast-channel__'
+
+export const THEME_STORAGE_KEYS = {
+  vitepress: 'vitepress-theme-appearance',
+  default: 'vueuse-color-scheme',
+}
diff --git a/packages/shared/src/env.ts b/packages/shared/src/env.ts
index 7a01ea1c0..69fb590ce 100644
--- a/packages/shared/src/env.ts
+++ b/packages/shared/src/env.ts
@@ -12,3 +12,22 @@ export const target = (typeof globalThis !== 'undefined'
 export const isInChromePanel = typeof target.chrome !== 'undefined' && !!target.chrome.devtools
 export const isInIframe = isBrowser && target.self !== target.top
 export const isInElectron = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('electron')
+
+export const checkIsVitepress = () => {
+  let t: typeof globalThis | Window = target
+
+  if (isInIframe && target.top)
+    t = target.top
+
+  let isVitepress = false
+
+  if (
+    // after 1.0.0-rc.45
+    !!(t as any)?.__vitepress__
+    // all versions
+    || t?.document?.getElementById('check-dark-mode')?.textContent?.includes('vitepress-theme-appearance')
+  )
+    isVitepress = true
+
+  return isVitepress
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 868aa7fa8..72cd4ffe6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "vue": ">=3.0.0-0"
   },
   "dependencies": {
+    "@vue/devtools-shared": "workspace:^",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
     "@vueuse/integrations": "^10.9.0",
diff --git a/packages/ui/src/composables/theme.ts b/packages/ui/src/composables/theme.ts
index 238129882..842883008 100644
--- a/packages/ui/src/composables/theme.ts
+++ b/packages/ui/src/composables/theme.ts
@@ -1,19 +1,12 @@
 import { BasicColorMode, UseColorModeOptions, useColorMode } from '@vueuse/core'
-
-/**
- * priorites following the desc order
- */
-export const ThemeStroageKeys = {
-  vitepress: 'vitepress-theme-appearance',
-  default: 'vueuse-color-scheme',
-}
+import { THEME_STORAGE_KEYS, checkIsVitepress } from '@vue/devtools-shared'
 
 export function useTheme<T extends string = BasicColorMode>(options?: UseColorModeOptions<T>) {
   options = options || {}
 
   if (!options?.storageKey) {
-    const keys = Object.values(ThemeStroageKeys)
-    options.storageKey = keys.find(k => !!localStorage.getItem(k))
+    if (checkIsVitepress())
+      options.storageKey = THEME_STORAGE_KEYS.vitepress
   }
 
   const colorMode = useColorMode(options)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 888e79b29..b30c5fdc5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -626,6 +626,9 @@ importers:
 
   packages/ui:
     dependencies:
+      '@vue/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
       '@vueuse/components':
         specifier: ^10.9.0
         version: 10.9.0(vue@3.4.21)