refactor(client+overlay): isolate light/dark theme with user-app

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()

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>

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>()

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: {

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,

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>

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"
   },

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__'

packages/shared/src/index.ts

@@ -1,3 +1,4 @@
 export * from './env'
 export * from './general'
 export * from './constants'
+export * from './theme'

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'),
+  }
+}

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",

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'