feat: syncing color mode backward for iframe, close #195

nuxt · Apr 23, 2023 · 76b3c7a · 76b3c7a
1 parent ebc9a38
commit 76b3c7a
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/packages/devtools/client/components/IframeView.vue b/packages/devtools/client/components/IframeView.vue
@@ -63,6 +63,11 @@ function syncColorMode() {
     const html = iframeEl.value.contentWindow.document.querySelector('html')
     html?.classList.toggle('dark', colorMode.value === 'dark')
     html?.classList.toggle('light', colorMode.value === 'dark')
+
+    const ob = new MutationObserver(() => {
+      colorMode.value = iframeEl.value?.contentWindow?.document.querySelector('html')?.classList.contains('dark') ? 'dark' : 'light'
+    })
+    ob.observe(html!, { attributes: true, attributeFilter: ['class'] })
   }
   catch (e) {
   }