common: match media to dark and circus styles

[sheet.git] / common.inc.plp

diff --git a/common.inc.plp b/common.inc.plp
index 6d6a532ed348afa6021bb3c4dd674db1fbea6c76..4bc68a67ba10379fe6041fb19d1a70a060afb7d0 100644 (file)
--- 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($/,
                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 '';
                );
                say '</head>';
                say '';