fix(hub-ui): preserve transparent iframe canvas

Author: dvcolomban

packages/hub-ui/src/client/standalone/index.html

@@ -6,19 +6,23 @@
     <title>Devframes</title>
     <meta name="description" content="Devframes hub" />
     <style>
+      :root {
+        color-scheme: light;
+        --devframes-viewer-background: #fff;
+      }
+      html.dark {
+        color-scheme: dark;
+        --devframes-viewer-background: #111;
+      }
+      html.viewer-background-transparent {
+        color-scheme: normal;
+        --devframes-viewer-background: transparent;
+      }
       html,
       body {
         margin: 0;
         height: 100%;
-        background: #fff;
-      }
-      html.dark,
-      html.dark body {
-        background: #111;
-      }
-      html.viewer-background-transparent,
-      html.viewer-background-transparent body {
-        background: transparent;
+        background: var(--devframes-viewer-background);
       }
       #app {
         height: 100%;

packages/hub-ui/src/client/standalone/main.ts

@@ -13,13 +13,13 @@ import { DEFAULT_DOCK_SESSION_STORE } from '../state/docks'
 // custom element's shadow root.
 
 // The viewer page runs in the light DOM, so mirror the color mode onto the
-// document element — its background and native controls follow the
-// Auto/Light/Dark choice.
+// document element — its background follows the Auto/Light/Dark choice. The
+// component tree carries `color-scheme` for its native controls; keeping that
+// off the document lets the transparent viewer expose the iframe's parent.
 watchEffect(() => {
   const el = document.documentElement
   el.classList.toggle('dark', isDark.value)
   el.classList.toggle('light', !isDark.value)
-  el.style.colorScheme = isDark.value ? 'dark' : 'light'
 })
 
 async function main(): Promise<void> {

packages/hub-ui/src/index.test.ts

@@ -9,13 +9,16 @@ function createContext(): DevframeHubContext {
 }
 
 describe('createUi branding background', () => {
-  it('keeps the viewer stylesheet static', () => {
-    expect.assertions(2)
+  it('defines the viewer background through a static token', () => {
+    expect.assertions(5)
 
     const html = readFileSync(join(import.meta.dirname, '..', 'dist', 'client', 'standalone', 'index.html'), 'utf8')
 
     expect(html).not.toContain('__hub-ui.css')
     expect(html).toContain('html.viewer-background-transparent')
+    expect(html).toContain('--devframes-viewer-background: transparent')
+    expect(html).toContain('background: var(--devframes-viewer-background)')
+    expect(html).toMatch(/html\.viewer-background-transparent\s*\{[^}]*color-scheme:\s*normal/)
   })
 
   it('preserves the default viewer background', () => {