vuejs · LoTwT · Jan 29, 2024 · Jan 29, 2024 · Mar 1, 2024 · Mar 1, 2024
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
@@ -3,11 +3,12 @@ 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 { useTheme } from '@vue/devtools-ui'
 
 import('./setup/unocss-runtime')
 
 // @TODO: fix browser extension cross-origin localStorage issue
-useColorMode()
+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
@@ -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
@@ -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/overlay/src/App.vue b/packages/overlay/src/App.vue
@@ -1,23 +1,24 @@
 <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 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,15 @@
+import { BasicColorMode, UseColorModeOptions, useColorMode } from '@vueuse/core'
+import { THEME_STORAGE_KEYS, checkIsVitepress } from '@vue/devtools-shared'
+
+export function useTheme<T extends string = BasicColorMode>(options?: UseColorModeOptions<T>) {
+  options = options || {}
+
+  if (!options?.storageKey) {
+    if (checkIsVitepress())
+      options.storageKey = THEME_STORAGE_KEYS.vitepress
+  }
+
+  const colorMode = useColorMode(options)
+
+  return colorMode
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml