fix(ui): color mode reactiveness

Author: antfu

packages/devtools/client/app.vue

@@ -2,7 +2,7 @@
 import { useEventListener, useEyeDropper } from'@vueuse/core'
 import { computed, onMounted, ref, watch, watchEffect } from'vue'
 import { useHead } from'#imports'
-import { getColorMode, showConnectionWarning, useClient, useInjectionClient } from'~/composables/client'
+import { getColorMode, setEmbedderColorMode, showConnectionWarning, useClient, useInjectionClient } from'~/composables/client'
 import { useCopy } from'~/composables/editor'
 import { setupFrameNav } from'~/composables/frame-nav'
 import { WS_DEBOUNCE_TIME } from'~/composables/rpc'
@@ -63,15 +63,27 @@ function onConnected() {
  }, WS_DEBOUNCE_TIME)
 }
 
+// Mirror the host app's scheme while we are embedded in one, so DevTools matches
+// the app it inspects. Passing `undefined` through (no host) hands control back
+// to the OS preference rather than pinning the last host value.
 watch(
  () =>client.value?.app.colorMode.value,
  (mode) => {
-if (mode)
-colorMode.value=mode
+setEmbedderColorMode(mode)
  },
  { immediate: true },
 )
 
+// The resolved scheme is derived, not stored, so applying it to the document is
+// ours to do.
+watchEffect(() => {
+if (!import.meta.client)
+return
+const isDark =colorMode.value==='dark'
+document.documentElement.classList.toggle('dark', isDark)
+document.documentElement.classList.toggle('light', !isDark)
+})
+
 useEventListener('keydown', (e) => {
 if (e.code==='KeyD'&&e.altKey) {
 client.value?.devtools.close()

packages/devtools/client/components/IframeView.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
 import { useElementBounding } from'@vueuse/core'
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watchEffect } from'vue'
-import { getColorMode, useInjectionClient } from'~/composables/client'
+import { getColorMode, setEmbedderColorMode, useInjectionClient } from'~/composables/client'
 
 const iframeCacheMap =newMap<string, HTMLIFrameElement>()
+const observedDocuments =newWeakSet<HTMLElement>()
 </script>
 
 <script setup lang="ts">
@@ -69,13 +70,28 @@ function syncColorMode() {
 return
 try {
 const html =iframeEl.value.contentWindow.document.querySelector('html')
-html?.classList.toggle('dark', colorMode.value==='dark')
-html?.classList.toggle('light', colorMode.value==='dark')
+if (!html)
+return
+
+const isDark =colorMode.value==='dark'
+html.classList.toggle('dark', isDark)
+html.classList.toggle('light', !isDark)
+
+// Iframes are cached and this runs from a watcher, an `onload` and a timer —
+// observe each document once instead of stacking observers on it.
+if (observedDocuments.has(html))
+return
+observedDocuments.add(html)
 
 const ob =newMutationObserver(() => {
-colorMode.value=iframeEl.value?.contentWindow?.document.querySelector('html')?.classList.contains('dark') ?'dark':'light'
+const tabScheme =html.classList.contains('dark') ?'dark':'light'
+// The push above trips this observer too. Only a *divergence* from what we
+// render means the tab picked a scheme of its own; treating our own write
+// as a choice would pin the UI to it and stop it following the OS.
+if (tabScheme!==colorMode.value)
+setEmbedderColorMode(tabScheme)
  })
-ob.observe(html!, { attributes: true, attributeFilter: ['class'] })
+ob.observe(html, { attributes: true, attributeFilter: ['class'] })
  }
 catch (e) {
  }

packages/devtools/client/composables/client.ts

@@ -3,7 +3,7 @@ import type { Unhead } from '@unhead/schema'
 importtype{DevToolsRpcClient}from'@vitejs/devtools-kit/client'
 importtype{ComputedRef}from'vue'
 importtype{useRoute,useRouter}from'#imports'
-import{useColorMode}from'@vueuse/core'
+import{usePreferredDark}from'@vueuse/core'
 import{computed,ref}from'vue'
 import{useState}from'#imports'
 import{renderMarkdown}from'./client-services/markdown'
@@ -54,10 +54,37 @@ export const showConnectionWarning = computed(() => {
 returnconnectionTimeout.value&&!useClient().value
 })
 
-exportfunctiongetColorMode(){
-returnuseColorMode({
-storageKey: 'nuxt-devtools-color-mode',
-})
+exporttypeColorScheme='dark'|'light'
+
+/**
+ * Color scheme pushed down by whatever embeds this client — the host app's
+ * resolved scheme (`useClientColorMode`), or a custom-tab iframe carrying its
+ * own toggle.
+ *
+ * Deliberately *not* persisted. This mirrors someone else's state, so storing
+ * it overwrote our own "follow the OS" default, permanently: nothing ever wrote
+ * `auto` back. Every surface without an embedder (the standalone hub UI, the
+ * client opened directly, `nuxi dev client`) was then frozen on whatever the OS
+ * happened to be the last time an embedder was attached.
+ */
+constembedderColorMode=ref<ColorScheme>()
+
+exportfunctionsetEmbedderColorMode(mode: ColorScheme|undefined){
+embedderColorMode.value=mode
+}
+
+letcolorMode: ComputedRef<ColorScheme>|undefined
+
+/**
+ * The scheme the DevTools UI renders in: the embedder's when there is one,
+ * otherwise the live OS `prefers-color-scheme`.
+ */
+exportfunctiongetColorMode(): ComputedRef<ColorScheme>{
+if(!colorMode){
+constpreferredDark=usePreferredDark()
+colorMode=computed(()=>embedderColorMode.value??(preferredDark.value ? 'dark' : 'light'))
+}
+returncolorMode
 }
 
 exportfunctionuseInjectionClient(): ComputedRef<NuxtDevtoolsIframeClient>{