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);
 }
 
 
@@ -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,7 +1,6 @@
 // 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
+function tocOnClick() {
 	var coll = document.querySelectorAll(".ltx_tocentry.ltx_tocentry_section > .ltx_ref");
 	var i;
 
@@ -22,6 +21,7 @@ for (i = 0; i < coll.length; i++) {
 			coll[i].classList.add("del");
 		}
 	}
+}
 
 // copy on click for section permalinks
 function copyURI(evt) {
@@ -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}