adding functions and css for light/dark

export/pghrtjs.js

@@ -1,25 +1,25 @@
 // this function adds the + and functionality to the toc so that it is less scary 
 // it's still pretty scary ngl it's a giant toc but at least it starts hidden
-// also this was super cobbled togethered from searches based on the limitations at hand
-// i don't know if this should be in like a main() or whatever. idk i don't code
-var coll = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref");
-var i;
+function tocOnClick() {
+	var coll = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref");
+	var i;
 
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-    var content = this.nextElementSibling;
-	if (content) {
-		if (content.style.maxHeight){
-			content.style.maxHeight = null;
-		} else {
-			content.style.maxHeight = content.scrollHeight + "px";
+	for (i = 0; i < coll.length; i++) {
+		coll[i].addEventListener("click", function () {
+			this.classList.toggle("active");
+			var content = this.nextElementSibling;
+			if (content) {
+				if (content.style.maxHeight) {
+					content.style.maxHeight = null;
+				} else {
+					content.style.maxHeight = content.scrollHeight + "px";
+				}
+			} else { }
+		});
+		// don't add the + if there's nothing to expand
+		if (coll[i].nextElementSibling) { } else {
+			coll[i].classList.add("del");
 		}
-    } else {}
-  });
-// don't add the + if there's nothing to expand
-	if (coll[i].nextElementSibling) {} else {
-		coll[i].classList.add("del");
 	}
 }
 
@@ -36,4 +36,55 @@ function copyURI(evt) {
 	var x = document.getElementById("snackbar");
 	x.className = "show";
 	setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2000);
-}
+}
+
+// source: https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
+// ty jimmy banks <3
+// determines if the user has a set theme or a stored theme on load
+function detectColorScheme(){
+    var theme="light";    //default to light
+	localStorage.setItem('theme', 'light'); // not technically required
+    //local storage is used to override OS theme settings
+    if(localStorage.getItem("theme")){
+        if(localStorage.getItem("theme") == "dark"){
+            var theme = "dark";
+        }
+    } else if(!window.matchMedia) {
+        //matchMedia method not supported
+        return false;
+    } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        //OS theme setting detected as dark
+        var theme = "dark";
+    }
+
+    //dark theme preferred, set document with a `data-theme` attribute
+    if (theme=="dark") {
+         document.documentElement.setAttribute("data-theme", "dark");
+		  localStorage.setItem('theme', 'dark');
+		// now honestly not to criticize this code i am copying too much but like
+		// why not reuse the theme var here? surely it's more error prone this way?
+    }
+}
+
+// source: https://www.accessibilityfirst.at/posts/dark-and-light-mode-a-simple-guide-for-web-design-and-development
+// add onClick to toggle theme between light and dark
+function themeToggle() {
+	document.getElementById('theme-toggle').addEventListener('click', () => {
+		document.documentElement.setAttribute(
+			'data-theme',
+			document.documentElement.getAttribute('data-theme') === 'dark'
+				? 'light'
+				: 'dark'
+		);
+		localStorage.setItem(
+			'theme',
+			document.documentElement.getAttribute('data-theme')
+		);
+	});
+}
+
+
+
+// run da functions
+tocOnClick();
+detectColorScheme();