feat[css,js]: implemented auto select

I implemented dark-light auto select in the js button.
I also corrected the baseof layout to put the selector in the right place.

layouts/_default/baseof.html

@@ -15,7 +15,6 @@
         <!-- The part of the page that begins to differ between templates -->
         {{ end }}
 
-        <script src="/js/dark.js"></script>
         {{ block "footer" . }}
         <!-- More shared code, perhaps a footer but that can be overridden if need be in  -->
 
@@ -23,5 +22,6 @@
             src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
         </script>
         {{ end }}
+        <script src="/js/dark.js"></script>
     </body>
 </html>

static/css/style.css

@@ -103,7 +103,6 @@ weight: bold;
 #mode-selector {
 position: relative;
 display: flex;
-padding: 0.125em 0.25em;
 border: 3px solid transparent;
 }
 #mode-selector button {

static/js/dark.js

@@ -286,19 +286,30 @@ function updateModeSelectorState() {
 
 /*  Set specified color mode (auto, light, dark).
     */
+function setDark() {
+    document.body.classList.add('dark');
+    document.getElementById("mode-selector").classList.add('dark');
+}
+function unsetDark() {
+        document.body.classList.remove('dark');
+        document.getElementById("mode-selector").classList.remove('dark');
+}
 function setMode(modeOption) {
     GWLog("setMode");
 
     // Inject the appropriate styles.
     let modeStyles = document.querySelector("#mode-styles");
     if (modeOption == 'auto') {
-        modeStyles.innerHTML = `@media (prefers-color-scheme:dark) {${GW.modeStyles}}`;
-    } else if (modeOption == 'dark') {
-        document.body.classList.add('dark');
-        document.getElementById("mode-selector").classList.add('dark');
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            setDark();
         } else {
-        document.body.classList.remove('dark');
-        document.getElementById("mode-selector").classList.remove('dark');
+            unsetDark();
+        }
+
+    } else if (modeOption == 'dark') {
+        setDark();
+    } else {
+        unsetDark();
     }
 
     // Update selector state.