@netless/telebox-insider 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.9",
+    "version": "0.2.10",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -140,24 +140,28 @@ export class TeleBox {
                             const prefersDark = window.matchMedia(
                                 "(prefers-color-scheme: dark)"
                             );
-                            darkMode$.setValue(prefersDark.matches, skipUpdate);
-                            const handler = (
-                                evt: MediaQueryListEvent
-                            ): void => {
-                                darkMode$.setValue(evt.matches, skipUpdate);
-                            };
-                            prefersDark.addEventListener("change", handler);
-                            return () =>
-                                prefersDark.removeEventListener(
-                                    "change",
-                                    handler
+                            if (prefersDark) {
+                                darkMode$.setValue(
+                                    prefersDark.matches,
+                                    skipUpdate
                                 );
+                                const handler = (
+                                    evt: MediaQueryListEvent
+                                ): void => {
+                                    darkMode$.setValue(evt.matches, skipUpdate);
+                                };
+                                prefersDark.addListener(handler);
+                                return () =>
+                                    prefersDark.removeListener(handler);
+                            } else {
+                                return noop;
+                            }
                         } else {
                             darkMode$.setValue(
                                 prefersColorScheme === "dark",
                                 skipUpdate
                             );
-                            return () => {};
+                            return noop;
                         }
                     }, "prefers-color-scheme");
                 }
@@ -1255,6 +1259,10 @@ export class TeleBox {
     }
 }
 
+function noop(): void {
+    return;
+}
+
 type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox
     ? TeleBox[K] extends Function
         ? never

package/src/TeleBoxManager/index.ts

@@ -70,14 +70,18 @@ export class TeleBoxManager {
         this.zIndex = zIndex;
 
         const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-        const prefersDark$ = createVal(prefersDark.matches);
-        this._sideEffect.add(() => {
-            const handler = (evt: MediaQueryListEvent): void => {
-                prefersDark$.setValue(evt.matches);
-            };
-            prefersDark.addEventListener("change", handler);
-            return () => prefersDark.removeEventListener("change", handler);
-        });
+        const prefersDark$ = createVal(false);
+
+        if (prefersDark) {
+            prefersDark$.setValue(prefersDark.matches);
+            this._sideEffect.add(() => {
+                const handler = (evt: MediaQueryListEvent): void => {
+                    prefersDark$.setValue(evt.matches);
+                };
+                prefersDark.addListener(handler);
+                return () => prefersDark.removeListener(handler);
+            });
+        }
 
         const prefersColorScheme$ = createVal(prefersColorScheme);
         prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {