@olenbetong/appframe-ds 1.7.2 → 1.9.0

package/src/theme/useDsColorScheme.ts

@@ -1,53 +1,53 @@
-import { useEffect, useState } from "react";
-
-export function getDsColorScheme(element?: Element | null): "light" | "dark" {
-	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
-	let scheme =
-		scoped?.dataset.colorScheme ??
-		document.body?.dataset.colorScheme ??
-		document.documentElement?.dataset.colorScheme ??
-		"light";
-
-	if (scheme === "auto") {
-		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-	}
-
-	return scheme === "dark" ? "dark" : "light";
-}
-
-/**
- * Tracks the color scheme Designsystemet is rendering with. The article template
- * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
- * so resolve it from `element` upwards when one is given. The OS preference is
- * watched too, since it decides the result when the scheme is `auto`.
- */
-export function useDsColorScheme(element?: Element | null) {
-	let [scheme, setScheme] = useState<"light" | "dark">(() => getDsColorScheme(element));
-
-	useEffect(() => {
-		function update() {
-			setScheme(getDsColorScheme(element));
-		}
-
-		update();
-
-		// `data-color-scheme` may sit on any ancestor, so watch the whole document
-		// for that one attribute rather than just `<html>` and `<body>`.
-		let observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["data-color-scheme"],
-			subtree: true,
-		});
-
-		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
-		media?.addEventListener("change", update);
-
-		return () => {
-			observer.disconnect();
-			media?.removeEventListener("change", update);
-		};
-	}, [element]);
-
-	return scheme;
-}
+import { useEffect, useState } from "react";
+
+export function getDsColorScheme(element?: Element | null): "light" | "dark" {
+	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
+	let scheme =
+		scoped?.dataset.colorScheme ??
+		document.body?.dataset.colorScheme ??
+		document.documentElement?.dataset.colorScheme ??
+		"light";
+
+	if (scheme === "auto") {
+		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+
+	return scheme === "dark" ? "dark" : "light";
+}
+
+/**
+ * Tracks the color scheme Designsystemet is rendering with. The article template
+ * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
+ * so resolve it from `element` upwards when one is given. The OS preference is
+ * watched too, since it decides the result when the scheme is `auto`.
+ */
+export function useDsColorScheme(element?: Element | null) {
+	let [scheme, setScheme] = useState<"light" | "dark">(() => getDsColorScheme(element));
+
+	useEffect(() => {
+		function update() {
+			setScheme(getDsColorScheme(element));
+		}
+
+		update();
+
+		// `data-color-scheme` may sit on any ancestor, so watch the whole document
+		// for that one attribute rather than just `<html>` and `<body>`.
+		let observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-color-scheme"],
+			subtree: true,
+		});
+
+		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+		media?.addEventListener("change", update);
+
+		return () => {
+			observer.disconnect();
+			media?.removeEventListener("change", update);
+		};
+	}, [element]);
+
+	return scheme;
+}