From 317f064ac227cebb47b9cd6efb2049af50dba603 Mon Sep 17 00:00:00 2001
From: J S <judah@freedomland.xyz>
Date: Mon, 13 Nov 2023 21:01:38 -0500
Subject: [PATCH] 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 |  2 +-
 static/css/style.css         |  1 -
 static/js/dark.js            | 21 ++++++++++++++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 33ae268..b6cea57 100644
--- a/layouts/_default/baseof.html
+++ b/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>
diff --git a/static/css/style.css b/static/css/style.css
index 3f99abd..4ad5b2c 100644
--- a/static/css/style.css
+++ b/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 {
diff --git a/static/js/dark.js b/static/js/dark.js
index 2996ba7..74b53fc 100644
--- a/static/js/dark.js
+++ b/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}}`;
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            setDark();
+        } else {
+            unsetDark();
+        }
+
     } else if (modeOption == 'dark') {
-        document.body.classList.add('dark');
-        document.getElementById("mode-selector").classList.add('dark');
+        setDark();
     } else {
-        document.body.classList.remove('dark');
-        document.getElementById("mode-selector").classList.remove('dark');
+        unsetDark();
     }
 
     // Update selector state.