From c8cc90653b5cd1701722cae752baaacbf7c73383 Mon Sep 17 00:00:00 2001
From: Martin <mart2070@purdue.edu>
Date: Mon, 6 May 2024 16:22:35 -0400
Subject: [PATCH] fix auto color mode

---
 tdx-enhanced.js | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/tdx-enhanced.js b/tdx-enhanced.js
index 59005f0..b8434a7 100644
--- a/tdx-enhanced.js
+++ b/tdx-enhanced.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         tdx-enhanced
 // @namespace    ecn
-// @version      2024-05-06-01
+// @version      2024-05-06-02
 // @description  enhanced tdx coloring & formatting. follows system color scheme.
 // @author       Purdue STEM IT - it@purdue.edu
 // @match        https://service.purdue.edu/TDNext/*
@@ -393,6 +393,9 @@
     }
 
     function setColorMode(mode) {
+        if (!mode) {
+            mode = "auto"
+        }
         console.log("Set color mode to",mode)
         var storageMode = mode
 
@@ -401,11 +404,16 @@
             storageMode = "auto"
         }
 
-        localStorage.setItem("styles",mode)
+        if (mode == "auto" || storageMode == "auto") {
+            mode = autoScheme
+            document.documentElement.classList.remove("lightMode")
+            document.documentElement.classList.remove("darkMode")
+        } else {
+            document.documentElement.classList.add(mode)
+        }
+
+        localStorage.setItem("styles",storageMode)
 
-        let remove = mode=="darkMode" ? "lightMode" : "darkMode"
-        document.documentElement.classList.add(mode)
-        document.documentElement.classList.remove(remove)
     }
 
     function getColorMode() {
@@ -415,6 +423,8 @@
 
         if (localScheme == "auto") {
             scheme = autoScheme
+        } else if (!localScheme) {
+            localScheme = autoScheme == "darkMode" ? "lightMode" : "darkMode"
         } else {
             scheme = localScheme
         }
@@ -667,6 +677,18 @@
 	color: var(--txt-4) !important;
 }
 
+@media (prefers-color-scheme: dark) {
+    html:not(.lightMode) #colorMode > .fa-moon {
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    html:not(.darkMode) #colorMode > .fa-sun {
+        display: none;
+    }
+}
+
 .lightMode #colorMode > .fa-sun {
     display: none;
 }