From 4a1c2d6a3436179f6d6381e3da4cf5f8f80ff37b Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Mon, 11 Mar 2024 14:21:32 -0700
Subject: [PATCH] make all samples light/dark responsive

---
 sample/a-buffer/index.html            | 3 +++
 sample/animometer/index.html          | 3 +++
 sample/bitonicSort/index.html         | 3 +++
 sample/cameras/index.html             | 3 +++
 sample/computeBoids/index.html        | 3 +++
 sample/cornell/index.html             | 3 +++
 sample/cubemap/index.html             | 3 +++
 sample/deferredRendering/index.html   | 3 +++
 sample/fractalCube/index.html         | 3 +++
 sample/gameOfLife/index.html          | 3 +++
 sample/helloTriangle/index.html       | 3 +++
 sample/helloTriangleMSAA/index.html   | 3 +++
 sample/imageBlur/index.html           | 3 +++
 sample/instancedCube/index.html       | 3 +++
 sample/multipleCanvases/index.html    | 3 +++
 sample/normalMap/index.html           | 3 +++
 sample/particles/index.html           | 3 +++
 sample/points/index.html              | 3 +++
 sample/renderBundles/index.html       | 3 +++
 sample/resizeCanvas/index.html        | 3 +++
 sample/resizeObserverHDDPI/index.html | 3 +++
 sample/reversedZ/index.html           | 3 +++
 sample/rotatingCube/index.html        | 3 +++
 sample/samplerParameters/index.html   | 3 +++
 sample/shadowMapping/index.html       | 3 +++
 sample/skinnedMesh/index.html         | 3 +++
 sample/textRenderingMsdf/index.html   | 3 +++
 sample/texturedCube/index.html        | 3 +++
 sample/twoCubes/index.html            | 3 +++
 sample/videoUploading/index.html      | 3 +++
 sample/worker/index.html              | 3 +++
 31 files changed, 93 insertions(+)

diff --git a/sample/a-buffer/index.html b/sample/a-buffer/index.html
index 9dd88227..f1144201 100644
--- a/sample/a-buffer/index.html
+++ b/sample/a-buffer/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: a-buffer</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/animometer/index.html b/sample/animometer/index.html
index 90deae6b..80011413 100644
--- a/sample/animometer/index.html
+++ b/sample/animometer/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: animometer</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/bitonicSort/index.html b/sample/bitonicSort/index.html
index c5749f72..1710d527 100644
--- a/sample/bitonicSort/index.html
+++ b/sample/bitonicSort/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: bitonicSort</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/cameras/index.html b/sample/cameras/index.html
index d8cdc53c..2740b06e 100644
--- a/sample/cameras/index.html
+++ b/sample/cameras/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: cameras</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/computeBoids/index.html b/sample/computeBoids/index.html
index 92ce0e67..fb01d4ce 100644
--- a/sample/computeBoids/index.html
+++ b/sample/computeBoids/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: computeBoids</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/cornell/index.html b/sample/cornell/index.html
index b20fdef0..2d81811f 100644
--- a/sample/cornell/index.html
+++ b/sample/cornell/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: cornell</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/cubemap/index.html b/sample/cubemap/index.html
index f3afb8ff..9d385402 100644
--- a/sample/cubemap/index.html
+++ b/sample/cubemap/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: cubemap</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/deferredRendering/index.html b/sample/deferredRendering/index.html
index 245f2240..dcb80564 100644
--- a/sample/deferredRendering/index.html
+++ b/sample/deferredRendering/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: deferredRendering</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/fractalCube/index.html b/sample/fractalCube/index.html
index b9b7ae55..43407b7e 100644
--- a/sample/fractalCube/index.html
+++ b/sample/fractalCube/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: fractalCube</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/gameOfLife/index.html b/sample/gameOfLife/index.html
index 60b794ff..a8907077 100644
--- a/sample/gameOfLife/index.html
+++ b/sample/gameOfLife/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: gameOfLife</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/helloTriangle/index.html b/sample/helloTriangle/index.html
index 93aa1a9b..b60dfbfb 100644
--- a/sample/helloTriangle/index.html
+++ b/sample/helloTriangle/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: helloTriangle</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/helloTriangleMSAA/index.html b/sample/helloTriangleMSAA/index.html
index f05a811d..997739a3 100644
--- a/sample/helloTriangleMSAA/index.html
+++ b/sample/helloTriangleMSAA/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: helloTriangleMSAA</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/imageBlur/index.html b/sample/imageBlur/index.html
index e2953ad4..ce1b9ef2 100644
--- a/sample/imageBlur/index.html
+++ b/sample/imageBlur/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: imageBlur</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/instancedCube/index.html b/sample/instancedCube/index.html
index 748ceb18..6957e09f 100644
--- a/sample/instancedCube/index.html
+++ b/sample/instancedCube/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: instancedCube</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/multipleCanvases/index.html b/sample/multipleCanvases/index.html
index 0fd68da8..ae3ea671 100644
--- a/sample/multipleCanvases/index.html
+++ b/sample/multipleCanvases/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: multiple canvases</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/normalMap/index.html b/sample/normalMap/index.html
index ee008e6a..a485e78f 100644
--- a/sample/normalMap/index.html
+++ b/sample/normalMap/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: normalMap</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/particles/index.html b/sample/particles/index.html
index be391de7..f91563fd 100644
--- a/sample/particles/index.html
+++ b/sample/particles/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: particles</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/points/index.html b/sample/points/index.html
index 54ed7fa3..bdf9a12a 100644
--- a/sample/points/index.html
+++ b/sample/points/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: points</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/renderBundles/index.html b/sample/renderBundles/index.html
index 6b0c4498..7a029207 100644
--- a/sample/renderBundles/index.html
+++ b/sample/renderBundles/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: renderBundles</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/resizeCanvas/index.html b/sample/resizeCanvas/index.html
index deba39fa..98466a59 100644
--- a/sample/resizeCanvas/index.html
+++ b/sample/resizeCanvas/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: resizeCanvas</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/resizeObserverHDDPI/index.html b/sample/resizeObserverHDDPI/index.html
index 4ebbac8f..9c7caf47 100644
--- a/sample/resizeObserverHDDPI/index.html
+++ b/sample/resizeObserverHDDPI/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: resizeObserverHDDPI</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/reversedZ/index.html b/sample/reversedZ/index.html
index 37cf1d82..652897ad 100644
--- a/sample/reversedZ/index.html
+++ b/sample/reversedZ/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: samplerParameters</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/rotatingCube/index.html b/sample/rotatingCube/index.html
index 9dd88227..f1144201 100644
--- a/sample/rotatingCube/index.html
+++ b/sample/rotatingCube/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: a-buffer</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/samplerParameters/index.html b/sample/samplerParameters/index.html
index 9dd88227..f1144201 100644
--- a/sample/samplerParameters/index.html
+++ b/sample/samplerParameters/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: a-buffer</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/shadowMapping/index.html b/sample/shadowMapping/index.html
index 97046f00..17b57a28 100644
--- a/sample/shadowMapping/index.html
+++ b/sample/shadowMapping/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: shadowMapping</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/skinnedMesh/index.html b/sample/skinnedMesh/index.html
index 3645b76e..8acc0809 100644
--- a/sample/skinnedMesh/index.html
+++ b/sample/skinnedMesh/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: skinnedMesh</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/textRenderingMsdf/index.html b/sample/textRenderingMsdf/index.html
index 5c58503b..0361136e 100644
--- a/sample/textRenderingMsdf/index.html
+++ b/sample/textRenderingMsdf/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: textRenderingMsdf</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/texturedCube/index.html b/sample/texturedCube/index.html
index 4e1eb2f5..8a79cacf 100644
--- a/sample/texturedCube/index.html
+++ b/sample/texturedCube/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: texturedCube</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/twoCubes/index.html b/sample/twoCubes/index.html
index 17f509ee..eacb9bbf 100644
--- a/sample/twoCubes/index.html
+++ b/sample/twoCubes/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: twoCubes</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/videoUploading/index.html b/sample/videoUploading/index.html
index 51e35cda..2849c89b 100644
--- a/sample/videoUploading/index.html
+++ b/sample/videoUploading/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: videoUploading</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */
diff --git a/sample/worker/index.html b/sample/worker/index.html
index 4b0cadc7..344d8621 100644
--- a/sample/worker/index.html
+++ b/sample/worker/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>webgpu-samples: worker</title>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       html, body {
         margin: 0;      /* remove default margin */
         height: 100%;   /* make body fill the browser window */