common: separate javascript include to set styles
authorMischa POSLAWSKY <perl@shiar.org>
Thu, 29 Aug 2024 12:26:06 +0000 (14:26 +0200)
committerMischa POSLAWSKY <perl@shiar.org>
Mon, 2 Sep 2024 19:29:58 +0000 (21:29 +0200)
Expect future feature expansion, which should be cached between pages
even if slightly slower for an initial visit (though optional, especially
while unconfigured).

common.inc.plp
prefer.js [new file with mode: 0644]

index ff84a9ac191e950dcbe88e33fc590b79b4b7561d..14ff204c5ffa669d5a43e9ec2a94fa6edf46f9a4 100644 (file)
@@ -178,19 +178,7 @@ sub Html {
                say '<link rel="icon" type="image/png" href="/clip.png">';
                say for map { @{$_} } $meta->{raw} || ();
                say '<meta name="robots" content="noindex">' if $Dev;
-               say "<script>$_</script>" for join($/,
-                       "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 '<script src="/prefer.js"></script>';
                say '</head>';
                say '';
                say sprintf '<body id="%s">', $file;
diff --git a/prefer.js b/prefer.js
new file mode 100644 (file)
index 0000000..2bf092b
--- /dev/null
+++ b/prefer.js
@@ -0,0 +1,14 @@
+(function prefstyle() {
+       docroot = document.documentElement;
+       if (docroot.className) {
+               return;
+       }
+       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);
+       });
+})();