ACCESSIBLITYYY

p5/sketch.js

@@ -16,9 +16,15 @@ function windowResized() {
 }
 
 function setup() {
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    console.log("Respecting reduced motion preference.");
+    noLoop(); // Stops animation
+    return;
+  }
+
   canvas = createCanvas(windowWidth, windowHeight);
   canvas.position(0, 0);
-  canvas.style("z-index", "-1");
+  canvas.style("z-index", "-1000");
 
   const params = new URLSearchParams(window.location.search);
 
@@ -32,7 +38,7 @@ function setup() {
     movers[5] = new Mover(50, "#732982");
   } else {
     movers[0] = new Mover(50, "red");
-    movers[1] = new Mover(60, "white");
+    movers[1] = new Mover(60, "purple");
     movers[2] = new Mover(40, "blue");
   }
 
@@ -40,7 +46,13 @@ function setup() {
 }
 
 function draw() {
-  background(0, 25);
+  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  if (isDarkMode) {
+    background(0, 25);
+  } else {
+    background(255, 25);
+  }
   for (let mover of movers) {
     mover.mouse_mass();
     for (let other of movers) {