Implement media-matching to auto-detect client dark mode setting

Originally done as part of
perlang-org/perlang@3178955.
I'm not fully convinced whether this is a good idea or not, or whether
it will just make people confused. Nonetheless, this keeps us in track
with the version we have deployed at https://perlang.org

darkerfx/styles/toggle-theme.js

@@ -1,7 +1,17 @@
 const sw = document.getElementById("switch-style"), b = document.body;
 
 if (sw && b) {
-    sw.checked = window.localStorage && localStorage.getItem("theme") === "theme-dark" || !window.localStorage;
+    if (window.localStorage && localStorage.getItem("theme") === "theme-dark") {
+        // Browser supports local storage and dark mode is configured.
+        sw.checked = true;
+    }
+    else {
+        // Browser does not support local storage, or no stored theme setting is
+        // present. Determine dark mode based on browser settings. Browsers
+        // which don't support media matching will default to light theme, in
+        // line with what most people would expect from a web page.
+        sw.checked = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
 
     b.classList.toggle("theme-dark", sw.checked)
     b.classList.toggle("theme-light", !sw.checked)