navigator: add user preference blocks (#759)

TurboWarp · Aug 25, 2023 · 73c9140 · 73c9140
1 parent be3127e
commit 73c9140
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/extensions/navigator.js b/extensions/navigator.js
@@ -26,7 +26,35 @@
             blockType: Scratch.BlockType.REPORTER,
             text: "device memory in GB",
           },
+          {
+            opcode: "getPreferredColorScheme",
+            blockType: Scratch.BlockType.BOOLEAN,
+            text: "user prefers [THEME] color scheme?",
+            arguments: {
+              THEME: {
+                type: Scratch.ArgumentType.STRING,
+                menu: "THEME",
+                defaultValue: "dark",
+              },
+            },
+          },
+          {
+            opcode: "getPreferredReducedMotion",
+            blockType: Scratch.BlockType.BOOLEAN,
+            text: "user prefers reduced motion?",
+          },
+          {
+            opcode: "getPreferredContrast",
+            blockType: Scratch.BlockType.BOOLEAN,
+            text: "user prefers more contrast?",
+          },
         ],
+        menus: {
+          THEME: {
+            acceptReporters: true,
+            items: ["light", "dark"],
+          },
+        },
       };
     }
 
@@ -73,6 +101,21 @@
         return navigator.deviceMemory;
       }
     }
+
+    getPreferredColorScheme(args) {
+      return (
+        window.matchMedia("(prefers-color-scheme: dark)").matches ===
+        (args.THEME === "dark")
+      );
+    }
+
+    getPreferredReducedMotion() {
+      return !!window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+
+    getPreferredContrast() {
+      return !!window.matchMedia("(prefers-contrast: more)").matches;
+    }
   }
 
   Scratch.extensions.register(new NavigatorInfo());