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 */