adding functions and css for light/dark

export/pghrtcss.css

@@ -18,6 +18,32 @@
     src: url('font/boit.otf') format('opentype');
 }
 
+/*default for light*/
+:root {
+    --font-color: #000;
+    --link-color:blue;
+    --main-bg: #fff; 
+    --toc-bg: #eee;
+    --toc-hover: #ccc;
+    --toc-accent: #ddd;
+    --typewriter-bg: #ddd;
+    --snackbar-bg: #333;
+    --snackbar-color: #fff;
+}
+
+[data-theme="dark"] {
+    --font-color: #000;
+    --link-color:blue;
+    --main-bg: #fff; 
+    --toc-bg: #eee;
+    --toc-hover: #ccc;
+    --toc-accent: #ddd;
+    --typewriter-bg: #ddd;
+    --snackbar-bg: #333;
+    --snackbar-color: #fff;
+}
+
+
 body {
 	font-family: 'crm';
 	padding: 0 0px 0 0;
@@ -26,7 +52,7 @@ body {
   font-variant-ligatures: none;
 }
 
-.ltx_TOC a:link, .ltx_TOC a:visited, .ltx_p a:link, .ltx_p a:visited { color: blue !important; }
+.ltx_TOC a:link, .ltx_TOC a:visited, .ltx_p a:link, .ltx_p a:visited { color: var(--link-color) !important; }
 .ltx_personname a:link, .ltx_personname a:visited { color: fuchsia; }
 
 .ltx_title_abstract, .ltx_title, .ltx_font_bold { font-family: 'bold'; font-weight: bold;}
@@ -42,12 +68,12 @@ body {
 .header { display: none; }
 
 .ltx_font_typewriter {
-  background-color: #ddd;
+  background-color: var(--typewriter-bg);
 }
 
 .ltx_page_main { margin-left: 400px; transition: margin 0.2s ease-out; padding: min(1em,1.5%) min(3em,4.5%) min(1em,1.5%) min(3em, 4.5%); width: 50%;}
 .ltx_TOC a { display: block; width: 100%; }
-.ltx_TOC { position: fixed; overflow-y: scroll; width: 400px; background-color: #eee; transition: width 0.2s ease-out; top: 0; bottom: 0; }
+.ltx_TOC { position: fixed; overflow-y: scroll; width: 400px; background-color: var(--toc-bg); transition: width 0.2s ease-out; top: 0; bottom: 0; }
 .ltx_TOC.show { width: 100vw; visibility: visible; }
 #menu { display: none; }
 
@@ -87,11 +113,11 @@ ol[class="ltx_toclist ltx_toclist_section"]{
 }
 
 .ltx_tocentry_subsection:hover, .ltx_ref.active:hover {
- background-color: #ccc;
+ background-color: var(--toc-hover);
 }
 *
 .ltx_tocentry_section:hover {
-  background-color: #ddd;
+  background-color: var(--toc-accent);
 }
 
 
@@ -105,14 +131,14 @@ ol[class="ltx_toclist ltx_toclist_section"]{
   margin-right: 5px;
   position: relative;
   z-index: 100;
-font-family: serif;
+  font-family: serif;
 }
 
 .ltx_tocentry.ltx_tocentry_section > .ltx_ref.active:after {
   content: "\2796"; /* Unicode character for "minus" sign (-) */
   position: relative;
   z-index: 100;
-font-family: serif; 
+  font-family: serif; 
 }
 
 /* removing +/- from any without subs*/
@@ -126,8 +152,8 @@ font-family: serif;
   visibility: hidden;
   min-width: 250px;
   margin-left: -125px;
-  background-color: #333;
-  color: #fff;
+  background-color: var(--snackbar-bg);
+  color: var(--snackbar-color);
   text-align: center;
   border-radius: 2px;
   padding: 16px;

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");
 	}
 }
 
@@ -37,3 +37,54 @@ function copyURI(evt) {
 	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();

pghrt.tex

@@ -19,6 +19,8 @@
     urlcolor=magenta,
  }
 
+% add in an a5 pdf version
+
 \usepackage{graphicx}
 \graphicspath{ {./img/} }
 \renewcommand{\abstractname}{DISCLAIMER}