fix dark mode issues

Author: ChrLackner

.gitignore

@@ -12,3 +12,4 @@ docs/html
 /docs/.virtual_documents/
 /.virtual_documents/
 /tests/output/
+/docs/_static/webgpu_scenes/

docs/_static/showcase.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4670cf7ee376ee7d5514a6f0b61862975febb5c83a9ff76aa8f076758900afa3
-size 345586
+oid sha256:e2c1ed6016aefde9f1047f0bf3cbea75275e4dc6a8bcf76ad53a9b8b3bf9fe2d
+size 346545

docs/create_showcase.py

@@ -60,6 +60,7 @@
 @media (prefers-color-scheme: dark) {{
   #showcase_root {{ --webgpu-canvas-bg: #adadad; }}
 }}
+html[data-theme="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; touch-action:none; border-radius:8px; display:block;"></canvas>

webgpu/engine/engine.js

@@ -873,6 +873,11 @@ class RenderEngine {
 
   _isDarkMode() {
     try {
+      // Prefer explicit page-level theme (e.g. pydata-sphinx-theme toggle)
+      const htmlTheme = document.documentElement && document.documentElement.dataset && document.documentElement.dataset.theme;
+      if (htmlTheme === 'dark') return true;
+      if (htmlTheme === 'light') return false;
+      // Fall back to OS-level preference
       return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
     } catch {
       return false;
@@ -899,6 +904,17 @@ class RenderEngine {
     } else if (this._themeMediaQuery.addListener) {
       this._themeMediaQuery.addListener(this._onThemeChange);
     }
+    // Also observe data-theme attribute changes (e.g. pydata-sphinx-theme)
+    if (document.documentElement && typeof MutationObserver !== 'undefined') {
+      this._themeAttrObserver = new MutationObserver(() => {
+        this._applyTheme();
+        this.render();
+      });
+      this._themeAttrObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+      });
+    }
   }
 
   _teardownThemeObserver() {
@@ -910,6 +926,10 @@ class RenderEngine {
     }
     this._themeMediaQuery = null;
     this._onThemeChange = null;
+    if (this._themeAttrObserver) {
+      this._themeAttrObserver.disconnect();
+      this._themeAttrObserver = null;
+    }
   }
 
   dispose() {

webgpu/jupyter.py

@@ -41,6 +41,7 @@ def _init_html(scene, width, height, flex=None):
               @media (prefers-color-scheme: dark) {{
                 #{id_}root {{ --webgpu-canvas-bg: #adadad; }}
               }}
+              html[data-theme="dark"] #{id_}root {{ --webgpu-canvas-bg: #adadad; }}
             </style>
             <div id='{id_}root'
             style="position: relative; width: min({width}px, 100%); max-width: 100%; overflow: hidden;"
@@ -227,24 +228,23 @@ def _DrawHTMLLazy(scene, width=640, height=600):
     lazy_html = f"""
     <style>
       #{id_}root {{ --webgpu-canvas-bg: #ffffff; }}
-      #{id_}img_light {{ display: block; }}
-      #{id_}img_dark {{ display: none; }}
       @media (prefers-color-scheme: dark) {{
         #{id_}root {{ --webgpu-canvas-bg: #adadad; }}
-        #{id_}img_light {{ display: none; }}
-        #{id_}img_dark {{ display: block; }}
       }}
+      html[data-theme="dark"] #{id_}root {{ --webgpu-canvas-bg: #adadad; }}
     </style>
     <div id='{id_}root'
          style="position: relative; width: min({width}px, 100%); max-width: 100%; overflow: hidden;"
     >
         <img id='{id_}img_light'
+             class='only-light dark-light'
              src='{screenshot_light_url}'
              style='width: 100%; max-width: 100%; height: auto; aspect-ratio: {width} / {height}; display: block;'
         />
         <img id='{id_}img_dark'
+             class='only-dark dark-light'
              src='{screenshot_dark_url}'
-             style='width: 100%; max-width: 100%; height: auto; aspect-ratio: {width} / {height}; display: none;'
+             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%;