diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index f03aff414..fbd510e72 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
-import { isInChromePanel } from '@vue/devtools-shared'
+import { isInChromePanel, useDevtoolsColorMode } from '@vue/devtools-shared'
 import { Pane, Splitpanes } from 'splitpanes'
 
 import('./setup/unocss-runtime')
 
 // @TODO: fix browser extension cross-origin localStorage issue
-useColorMode()
+useDevtoolsColorMode()
 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..cfa24d38e 100644
--- a/packages/client/src/components/chrome/ViewModeSwitch.vue
+++ b/packages/client/src/components/chrome/ViewModeSwitch.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { useDevtoolsColorMode } from '@vue/devtools-shared'
 import { VueButton } from '@vue/devtools-ui'
 
-useColorMode()
+useDevtoolsColorMode()
 
 const { toggle } = useToggleViewMode()
 </script>
diff --git a/packages/client/src/components/common/IframeView.vue b/packages/client/src/components/common/IframeView.vue
index 0979b02e8..ff8b97a32 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 { useDevtoolsColorMode } from '@vue/devtools-shared'
+
 const iframeCacheMap = new Map<string, HTMLIFrameElement>()
 </script>
 
@@ -7,7 +9,7 @@ const props = defineProps<{
   src: string
 }>()
 
-const colorMode = useColorMode()
+const { colorMode } = useDevtoolsColorMode()
 const anchor = ref<HTMLDivElement>()
 const key = computed(() => props.src)
 const iframeEl = ref<HTMLIFrameElement>()
diff --git a/packages/client/src/composables/graph.ts b/packages/client/src/composables/graph.ts
index d5452f82f..e7d71b926 100644
--- a/packages/client/src/composables/graph.ts
+++ b/packages/client/src/composables/graph.ts
@@ -1,7 +1,7 @@
 import type { ModuleInfo } from '@vue/devtools-core'
 import { DataSet } from 'vis-network/standalone'
 import type { Edge, Node, Options } from 'vis-network'
-import { deepClone } from '@vue/devtools-shared'
+import { deepClone, useDevtoolsColorMode } from '@vue/devtools-shared'
 
 // #region file types
 export const fileTypes = {
@@ -52,7 +52,7 @@ export function useFileTypes() {
 // #endregion
 
 // #region graph options
-const isDark = useDark()
+const { isDark } = useDevtoolsColorMode()
 
 export const graphOptions = computed<Options>(() => ({
   nodes: {
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index f92568258..48d020507 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -1,16 +1,18 @@
 <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 { target, useDevtoolsColorMode } from '@vue/devtools-shared'
 import { devtools, onDevToolsConnected } from '@vue/devtools-kit'
 import { registerBridge, useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
 import { checkIsSafari } from '~/utils'
 import Frame from '~/components/FrameBox.vue'
 
 type ViewMode = 'xs' | 'default' | 'fullscreen'
+const anchorEle = ref<HTMLDivElement>()
 const panelEle = ref<HTMLDivElement>()
-const mode = useColorMode()
+const { colorMode: mode } = useDevtoolsColorMode({
+  selector: anchorEle,
+})
 const panelState = ref<{
   viewMode: ViewMode
 }>({
@@ -98,6 +100,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
 <template>
   <div
     v-show="state.preferShowFloatingPanel ? overlayVisible : panelVisible"
+    ref="anchorEle"
     class="vue-devtools__anchor" :style="[anchorStyle, cssVars]" :class="{
       'vue-devtools__anchor--vertical': isVertical,
       'vue-devtools__anchor--hide': isHidden,
diff --git a/packages/playground/applet/src/App.vue b/packages/playground/applet/src/App.vue
index e49c099c7..08c4954b6 100644
--- a/packages/playground/applet/src/App.vue
+++ b/packages/playground/applet/src/App.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useColorMode, useDark } from '@vueuse/core'
 import { Pinia } from '@vue/devtools-applet'
 import '@vue/devtools-applet/style.css'
 import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
+import { useDevtoolsColorMode } from '@vue/devtools-shared'
 import { useCounterStore } from './stores'
 
-const isDark = useDark()
+const { isDark } = useDevtoolsColorMode()
 // user app
 const counterStore = useCounterStore()
 
@@ -45,7 +45,7 @@ function initVueDevToolsState() {
   })
 }
 
-useColorMode()
+useDevtoolsColorMode()
 </script>
 
 <template>
diff --git a/packages/shared/package.json b/packages/shared/package.json
index cce011e3d..6f39b5397 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -20,6 +20,18 @@
     "prepare:type": "tsup --dts-only",
     "stub": "tsup --watch --onSuccess 'tsup --dts-only'"
   },
+  "peerDependencies": {
+    "@vueuse/core": ">=10.0.0",
+    "vue": ">=3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@vueuse/core": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "rfdc": "^1.3.1"
   },
diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts
index 2a62c99c8..c836ac133 100644
--- a/packages/shared/src/constants.ts
+++ b/packages/shared/src/constants.ts
@@ -2,3 +2,4 @@ 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_KEY = '__vue-devtools-theme__'
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 298f33d94..bab50eed8 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1,3 +1,4 @@
 export * from './env'
 export * from './general'
 export * from './constants'
+export * from './theme'
diff --git a/packages/shared/src/theme.ts b/packages/shared/src/theme.ts
new file mode 100644
index 000000000..e7895bae3
--- /dev/null
+++ b/packages/shared/src/theme.ts
@@ -0,0 +1,14 @@
+import { type UseColorModeOptions, useColorMode } from '@vueuse/core'
+import { computed } from 'vue'
+import { THEME_KEY } from './constants'
+
+export function useDevtoolsColorMode(options: Omit<UseColorModeOptions, 'storageKey'> = {}) {
+  const colorMode = useColorMode({
+    ...options,
+    storageKey: THEME_KEY,
+  })
+  return {
+    colorMode,
+    isDark: computed(() => colorMode.value === 'dark'),
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ca0a040ca..2a3a81bbe 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/components/DarkToggle.vue b/packages/ui/src/components/DarkToggle.vue
index 725b9c0b5..2ecf22455 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 { useDevtoolsColorMode } from '@vue/devtools-shared'
 
 const props = withDefaults(defineProps<{
   isDark?: boolean
@@ -14,7 +15,7 @@ const props = withDefaults(defineProps<{
 
 const isDarkModel = useVModel(props, 'isDark')
 
-const mode = useColorMode({
+const { colorMode: mode } = useDevtoolsColorMode({
   initialValue: isDarkModel.value ? 'dark' : 'light',
   onChanged: (value) => {
     isDarkModel.value = value === 'dark'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59510cf65..efb2436df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -717,9 +717,15 @@ importers:
 
   packages/shared:
     dependencies:
+      '@vueuse/core':
+        specifier: '>=10.0.0'
+        version: 10.9.0(vue@3.4.21)
       rfdc:
         specifier: ^1.3.1
         version: 1.3.1
+      vue:
+        specifier: '>=3.2.0'
+        version: 3.4.21(typescript@5.4.4)
     devDependencies:
       '@types/node':
         specifier: ^20.12.5
@@ -727,6 +733,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)