fix: detect vitepress theme key

Author: LoTwT

packages/client/src/App.vue

@@ -3,11 +3,15 @@ import type { Ref } from 'vue'
 import { useDevToolsBridge, useDevToolsBridgeRpc, 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()

packages/client/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './color'
 export * from './time'
+export * from './theme'

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
+}