Merge pull request #393 from greggman/sample-light-dark

make all samples light/dark responsive
webgpu · Mar 11, 2024 · c7e45d4 · c7e45d4
2 parents 314297f + 4a1c2d6
commit c7e45d4
Show file tree

Hide file tree

Showing 31 changed files with 93 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 */