darkmode and better canvas height for mobile

Author: ChrLackner

docs/_static/showcase.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca38daad75bded7da127d610643015dd0a6284f3bb6ae7119d64ea03df4b3152
-size 310648
+oid sha256:f10b9b152c3ad2ef2b459675f70b9a383f2116773c05ed02fa92d3a590f06655
+size 311035

docs/create_showcase.py

@@ -55,8 +55,14 @@
 
 canvas_id = "showcase_canvas"
 html = f"""\
-<div style="width:100%; max-width:800px; height:400px; margin:0 auto 1em auto; position:relative;">
-<canvas id="{canvas_id}" width="800" height="400" style="width:100%; height:100%; border-radius:8px; display:block;"></canvas>
+<style>
+#showcase_root {{ --webgpu-canvas-bg: #ffffff; }}
+@media (prefers-color-scheme: dark) {{
+  #showcase_root {{ --webgpu-canvas-bg: #adadad; }}
+}}
+</style>
+<div id="showcase_root" style="width:min(800px,100%); max-width:100%; margin:0 auto 1em auto; position:relative;">
+<canvas id="{canvas_id}" width="800" height="400" style="background-color:var(--webgpu-canvas-bg,#ffffff); width:100%; max-width:100%; height:auto; aspect-ratio:800 / 400; border-radius:8px; display:block;"></canvas>
 <script>
 {engine_js}
 RenderEngine.create("{canvas_id}", "{blob_b64}");

webgpu/engine/engine.js

@@ -4,7 +4,10 @@
 // All are concatenated into the same scope by the Python loader — no imports.
 
 const SAMPLE_COUNT = 4;
-const CLEAR_COLOR = { r: 1.0, g: 1.0, b: 1.0, a: 1.0 };
+const LIGHT_CLEAR_COLOR = Object.freeze({ r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
+const DARK_CLEAR_COLOR  = Object.freeze({ r: 0.68, g: 0.68, b: 0.68, a: 1.0 });
+const LIGHT_CANVAS_BG = '#ffffff';
+const DARK_CANVAS_BG  = '#adadad';
 const DEPTH_FORMAT = 'depth24plus';
 
 const TRANSPARENT_BLEND = {
@@ -297,6 +300,10 @@ class RenderEngine {
       this._resizeObserver.observe(canvas);
     }
 
+    // --- Theme handling ---
+    this._applyTheme();
+    this._setupThemeObserver();
+
     // --- First frame ---
     // In live mode, the host decides when to render. Don't auto-render.
     if (this.mode !== 'live') this.render();
@@ -741,7 +748,7 @@ class RenderEngine {
         resolveTarget: canvasTexture.createView(),
         loadOp: 'clear',
         storeOp: 'store',
-        clearValue: CLEAR_COLOR,
+        clearValue: this.clearColor || LIGHT_CLEAR_COLOR,
       }],
       depthStencilAttachment: {
         view: this.depthTexture.createView(),
@@ -864,8 +871,50 @@ class RenderEngine {
     return out;
   }
 
+  _isDarkMode() {
+    try {
+      return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    } catch {
+      return false;
+    }
+  }
+
+  _applyTheme() {
+    const dark = this._isDarkMode();
+    this.clearColor = dark ? DARK_CLEAR_COLOR : LIGHT_CLEAR_COLOR;
+    if (this.canvas && this.canvas.style) {
+      this.canvas.style.backgroundColor = dark ? DARK_CANVAS_BG : LIGHT_CANVAS_BG;
+    }
+  }
+
+  _setupThemeObserver() {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    this._themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this._onThemeChange = () => {
+      this._applyTheme();
+      this.render();
+    };
+    if (this._themeMediaQuery.addEventListener) {
+      this._themeMediaQuery.addEventListener('change', this._onThemeChange);
+    } else if (this._themeMediaQuery.addListener) {
+      this._themeMediaQuery.addListener(this._onThemeChange);
+    }
+  }
+
+  _teardownThemeObserver() {
+    if (!this._themeMediaQuery || !this._onThemeChange) return;
+    if (this._themeMediaQuery.removeEventListener) {
+      this._themeMediaQuery.removeEventListener('change', this._onThemeChange);
+    } else if (this._themeMediaQuery.removeListener) {
+      this._themeMediaQuery.removeListener(this._onThemeChange);
+    }
+    this._themeMediaQuery = null;
+    this._onThemeChange = null;
+  }
+
   dispose() {
     if (this._resizeObserver) this._resizeObserver.disconnect();
+    this._teardownThemeObserver();
     if (this.input) this.input.dispose();
     if (this.interactions) this.interactions.dispose();
     if (this.depthTexture) this.depthTexture.destroy();

webgpu/jupyter.py

@@ -26,19 +26,28 @@ def _init_html(scene, width, height, flex=None):
 
     id_ = f"__webgpu_{next(_id_counter)}_"
 
-    style = f"background-color: white; width: {width}px; height: {height}px; touch-action: none;"
+    style = (
+        f"background-color: var(--webgpu-canvas-bg, #ffffff); width: min({width}px, 100%); max-width: 100%; "
+        f"height: auto; aspect-ratio: {width} / {height}; touch-action: none;"
+    )
     if flex is not None:
         style += f" flex: {flex};"
 
     display(
         HTML(
             f"""
+            <style>
+              #{id_}root {{ --webgpu-canvas-bg: #ffffff; }}
+              @media (prefers-color-scheme: dark) {{
+                #{id_}root {{ --webgpu-canvas-bg: #adadad; }}
+              }}
+            </style>
             <div id='{id_}root'
-            style="position: relative; width: {width}px; max-width: 100%; overflow: hidden;"
+            style="position: relative; width: min({width}px, 100%); max-width: 100%; overflow: hidden;"
             >
-                <canvas 
+                <canvas
                     id='{id_}canvas'
-                    style='{style} max-width: 100%; display: block;'
+                    style='{style} display: block;'
                 >
                 </canvas>
                 <div id='{id_}lilgui'
@@ -204,12 +213,18 @@ def _DrawHTMLLazy(scene, width=640, height=600):
 
     # Emit the lazy-load HTML: only screenshot + overlay, everything else loaded on click
     lazy_html = f"""
+    <style>
+      #{id_}root {{ --webgpu-canvas-bg: #ffffff; }}
+      @media (prefers-color-scheme: dark) {{
+        #{id_}root {{ --webgpu-canvas-bg: #adadad; }}
+      }}
+    </style>
     <div id='{id_}root'
-         style="position: relative; width: {width}px; max-width: 100%; overflow: hidden;"
+         style="position: relative; width: min({width}px, 100%); max-width: 100%; overflow: hidden;"
     >
         <img id='{id_}img'
              src='{screenshot_url}'
-             style='width: {width}px; height: {height}px; max-width: 100%; display: block;'
+             style='width: 100%; max-width: 100%; height: auto; aspect-ratio: {width} / {height}; display: block;'
         />
         <div id='{id_}overlay'
              style='position: absolute; top: 0; left: 0; width: 100%; height: 100%;
@@ -226,8 +241,8 @@ def _DrawHTMLLazy(scene, width=640, height=600):
         </div>
         <canvas
             id='{canvas_id}'
-            style='background-color: white; width: {width}px; height: {height}px;
-                   touch-action: none; max-width: 100%; display: none;'
+            style='background-color: var(--webgpu-canvas-bg, #ffffff); width: 100%; max-width: 100%; height: auto;
+                   aspect-ratio: {width} / {height}; touch-action: none; display: none;'
         ></canvas>
         <div id='{id_}lilgui'
              style='position: absolute; top: 0; right: 0; z-index: 10;'