From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 15 Jun 2024 10:11:49 +0000 (+0200)
Subject: common: match media to dark and circus styles
X-Git-Tag: v1.20~17
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/41af4e92ea22b885a6651537e8780d7be6d27287

common: match media to dark and circus styles

All colour options are now readily available, and can be enabled by client
media preferences (though expect only some support for dark color-scheme).
Will not apply if an existing ?style setting has been given.
---

diff --git a/common.inc.plp b/common.inc.plp
index 6d6a532..4bc68a6 100644
--- a/common.inc.plp
+++ b/common.inc.plp
@@ -181,8 +181,17 @@ sub Html {
 		say for map { @{$_} } $meta->{raw} || ();
 		say '<meta name="robots" content="noindex">' if $Dev;
 		say "<script>$_</script>" for join($/,
-			"if (m = window.matchMedia('(monochrome)'))",
-			"(m.onchange = e => document.documentElement.classList.toggle('s-mono', e.matches))(m);",
+			"docroot = document.documentElement;",
+			"if (docroot.className == '') {",
+			"new Map([",
+				"['s-mono','(monochrome)'],",
+				"['s-dark','(prefers-color-scheme: dark)'],",
+				"['s-circus','(prefers-contrast: more)'],",
+			"]).forEach((q,c) => {",
+				"if (m = window.matchMedia(q))",
+				"(m.onchange = e => docroot.classList.toggle(c, e.matches))(m)",
+			"})",
+			"}",
 		);
 		say '</head>';
 		say '';