fix(shared): move useDevToolsColorMode function to ui package

packages/applet/src/components/tree/TreeViewer.vue

@@ -46,7 +46,7 @@ function select(id: string) {
         <span group-hover:text-white class="[.active_&]:(text-white)">{{ item.name }}</span>
         <span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
       </span>
-      <NodeTag v-for="(_item, index) in item.tags" :key="index" :tag="_item" />
+      <NodeTag v-for="(_item, _index) in item.tags" :key="_index" :tag="_item" />
     </div>
     <div
       v-if="item?.children?.length && expanded.includes(item.id)"

packages/client/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
-import { isInChromePanel, useDevToolsColorMode } from '@vue/devtools-shared'
+import { isInChromePanel } from '@vue/devtools-shared'
+import { useDevToolsColorMode } from '@vue/devtools-ui'
 import { Pane, Splitpanes } from 'splitpanes'
 
 import('./setup/unocss-runtime')

packages/client/src/components/chrome/ViewModeSwitch.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useDevToolsColorMode } from '@vue/devtools-shared'
-import { VueButton } from '@vue/devtools-ui'
+import { VueButton, useDevToolsColorMode } from '@vue/devtools-ui'
 
 useDevToolsColorMode()
 

packages/client/src/components/common/IframeView.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useDevToolsColorMode } from '@vue/devtools-shared'
+import { useDevToolsColorMode } from '@vue/devtools-ui'
 
 const iframeCacheMap = new Map<string, HTMLIFrameElement>()
 </script>

packages/client/src/composables/graph.ts

@@ -1,7 +1,8 @@
 import type { ModuleInfo } from '@vue/devtools-core'
 import { DataSet } from 'vis-network/standalone'
 import type { Edge, Node, Options } from 'vis-network'
-import { deepClone, useDevToolsColorMode } from '@vue/devtools-shared'
+import { deepClone } from '@vue/devtools-shared'
+import { useDevToolsColorMode } from '@vue/devtools-ui'
 
 // #region file types
 export const fileTypes = {

packages/overlay/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { Bridge, getDevToolsClientUrl, prepareInjection } from '@vue/devtools-core'
-import { target, useDevToolsColorMode } from '@vue/devtools-shared'
+import { target } from '@vue/devtools-shared'
+import { useDevToolsColorMode } from '@vue/devtools-ui'
 import { devtools, onDevToolsConnected } from '@vue/devtools-kit'
 import { registerBridge, useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
 import { checkIsSafari } from '~/utils'

packages/playground/applet/src/App.vue

@@ -2,7 +2,6 @@
 import { Components } 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 { useDark } from '@vueuse/core'
 import { useCounterStore } from './stores'
 import Hello from './components/Hello.vue'
@@ -46,8 +45,6 @@ function initVueDevToolsState() {
     clientConnected.value = data!.clientConnected
   })
 }
-
-useDevToolsColorMode()
 </script>
 
 <template>

packages/shared/package.json

@@ -20,18 +20,6 @@
     "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,4 +2,3 @@ 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,4 +1,3 @@
 export * from './env'
 export * from './general'
 export * from './constants'
-export * from './theme'

packages/ui/src/components/DarkToggle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { useDevToolsColorMode } from '@vue/devtools-shared'
+import { useDevToolsColorMode } from '../composables'
 
 const props = withDefaults(defineProps<{
   isDark?: boolean

packages/ui/src/composables/index.ts

@@ -1,2 +1,3 @@
 export * from './notification'
 export type * from './notification'
+export * from './theme'

packages/shared/src/theme.ts → packages/ui/src/composables/theme.ts

@@ -1,6 +1,7 @@
 import { type UseColorModeOptions, useColorMode } from '@vueuse/core'
 import { computed } from 'vue'
-import { THEME_KEY } from './constants'
+
+export const THEME_KEY = '__vue-devtools-theme__'
 
 export function useDevToolsColorMode(options: Omit<UseColorModeOptions, 'storageKey'> = {}) {
   const colorMode = useColorMode({