fix: color mode

Author: antfu

packages/devtools/client/app.vue

@@ -34,7 +34,7 @@ setupClientRPC()
 
 const client = useClient()
 const route = useRoute()
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
 const waiting = computed(() => !client.value && !showConnectionWarning.value)
 

packages/devtools/client/components/ComponentsGraph.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const container = ref<HTMLElement>()
 const navbar = ref<HTMLElement>()
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 
 const selected = ref<{
   id: string

packages/devtools/client/components/IframeView.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
   tab: ModuleCustomTab
 }>()
 
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const anchor = ref<HTMLDivElement>()
 const key = computed(() => props.tab.name)
 const iframeEl = ref<HTMLIFrameElement>()

packages/devtools/client/components/ServerRouteDetails.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
 
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const config = useServerConfig()
 const client = useClient()
 

packages/devtools/client/components/ServerTaskDetails.vue

@@ -16,7 +16,7 @@ const routeInputBodyJSON = ref<any>({ payload: {} })
 const { inputDefaults } = useDevToolsOptions('serverRoutes')
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const config = useServerConfig()
 
 const response = reactive({

packages/devtools/client/components/StateEditor.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
 }>()
 
 const isOpen = useVModel(props, 'open', emit, { passive: true })
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const proxy = shallowRef()
 const error = shallowRef()
 

packages/devtools/client/components/StorageDetails.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
 
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const nuxtApp = useNuxtApp()
 const router = useRouter()
 const searchString = ref('')

packages/devtools/client/components/TimelineArgumentView.vue

@@ -26,7 +26,7 @@ const OnSetup = defineComponent({
   },
 })
 
-const colorMode = useColorMode()
+const colorMode = getColorMode()
 const copy = useCopy()
 </script>
 

packages/devtools/client/composables/client.ts

@@ -36,9 +36,15 @@ export const showConnectionWarning = computed(() => {
   return connectionTimeout.value && !useClient().value
 })
 
+export function getColorMode() {
+  return useColorMode({
+    storageKey: 'nuxt-devtools-color-mode',
+  })
+}
+
 export function useInjectionClient(): ComputedRef<NuxtDevtoolsIframeClient> {
   const client = useClient()
-  const mode = useColorMode()
+  const mode = getColorMode()
 
   return computed(() => ({
     host: client.value,