sync dark mode with block (frame stuff) (#346)

Author: sethhorsley

app/components/docs/visual_code_example.rb

@@ -78,9 +78,9 @@ def render_preview_tab(&block)
       end
 
       def iframe_preview
-        div(class: "relative aspect-[4/2.5] w-full overflow-hidden rounded-md border") do
+        div(class: "relative aspect-[4/2.5] w-full overflow-hidden rounded-md border", data: {controller: "iframe-theme"}) do
           div(class: "absolute inset-0 hidden w-[1600px] bg-background md:block") do
-            iframe(src: @src, class: "size-full")
+            iframe(src: @src, class: "size-full", data: {iframe_theme_target: "iframe"})
           end
         end
       end

app/javascript/controllers/iframe_theme_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["iframe"]
+
+  connect() {
+    this.setupThemeObserver()
+    this.setupIframeListeners()
+    this.syncAllIframes()
+  }
+
+  disconnect() {
+    this.observer?.disconnect()
+  }
+
+  iframeTargetConnected(iframe) {
+    this.setupIframeListener(iframe)
+    this.syncThemeToIframe(iframe)
+  }
+
+  setupThemeObserver() {
+    this.observer = new MutationObserver(() => this.syncAllIframes())
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+  }
+
+  setupIframeListeners() {
+    this.iframeTargets.forEach(iframe => this.setupIframeListener(iframe))
+  }
+
+  setupIframeListener(iframe) {
+    if (!iframe.src) return
+
+    iframe.addEventListener('load', () => this.syncThemeToIframe(iframe))
+    
+    if (this.isIframeLoaded(iframe)) {
+      this.syncThemeToIframe(iframe)
+    }
+  }
+
+  syncAllIframes() {
+    this.iframeTargets.forEach(iframe => this.syncThemeToIframe(iframe))
+  }
+
+  syncThemeToIframe(iframe) {
+    if (!iframe.src) return
+
+    const iframeDoc = this.getIframeDocument(iframe)
+    if (!iframeDoc?.documentElement) return
+
+    iframeDoc.documentElement.classList.toggle('dark', this.isDarkMode)
+  }
+
+  getIframeDocument(iframe) {
+    try {
+      return iframe.contentDocument || iframe.contentWindow?.document
+    } catch (e) {
+      return null
+    }
+  }
+
+  isIframeLoaded(iframe) {
+    const doc = this.getIframeDocument(iframe)
+    return doc && doc.readyState === 'complete'
+  }
+
+  get isDarkMode() {
+    return document.documentElement.classList.contains('dark')
+  }
+}
+

app/javascript/controllers/index.js

@@ -82,5 +82,8 @@ application.register("ruby-ui--theme-toggle", RubyUi__ThemeToggleController)
 import RubyUi__TooltipController from "./ruby_ui/tooltip_controller"
 application.register("ruby-ui--tooltip", RubyUi__TooltipController)
 
+import IframeThemeController from "./iframe_theme_controller"
+application.register("iframe-theme", IframeThemeController)
+
 import SidebarMenuController from "./sidebar_menu_controller"
 application.register("sidebar-menu", SidebarMenuController)