Improves and fixes some light mode issues

client/css/global-light.css

@@ -1,53 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-:root {
-	--font-1: "Inter", sans-serif;
-	--section-gap: 20px;
-	--border-radius-1: 12px;
-
-	--colour-1: #ededed;
-	--colour-2: #000000;
-	--colour-3: #000000;
-	--colour-4: #000000;
-	--colour-5: #f4f4f4;
-	--colour-6: #d3d3d3;
-
-	--accent: #303030;
-	--blur-bg: #f4f4f4;
-	--blur-border: #e8e8e8;
-	--user-input: #000000;
-	--conversations: #555555;
-}
-
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	position: relative;
-	font-family: var(--font-1);
-}
-
-html,
-body {
-	background: var(--colour-1);
-	color: var(--colour-3);
-}
-
-ol,
-ul {
-	padding-left: 40px;
-}
-
-.shown {
-	display: flex !important;
-}
-
-a:-webkit-any-link {
-	color: var(--accent);
-}
-
-@media screen and (max-height: 720px) {
-	:root {
-		--section-gap: 40px;
-	}
-}

client/css/global.css

@@ -1,10 +1,31 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-:root {
+* {
 	--font-1: "Inter", sans-serif;
 	--section-gap: 24px;
 	--border-radius-1: 8px;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	position: relative;
+	font-family: var(--font-1);
+}
+
+.theme-light {
+	--colour-1: #ededed;
+	--colour-2: #000000;
+	--colour-3: #000000;
+	--colour-4: #000000;
+	--colour-5: #f4f4f4;
+	--colour-6: #d3d3d3;
+
+	--accent: #303030;
+	--blur-bg: #f4f4f4;
+	--blur-border: #e8e8e8;
+	--user-input: #000000;
+	--conversations: #555555;
+}
 
+.theme-dark {
 	--colour-1: #181818;
 	--colour-2: #ccc;
 	--colour-3: #dadada;
@@ -19,14 +40,6 @@
 	--conversations: #555555;
 }
 
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	position: relative;
-	font-family: var(--font-1);
-}
-
 html,
 body {
 	background: var(--colour-1);

client/html/index.html

@@ -92,8 +92,8 @@
 							<span>Web Access</span>
 						</div>
 						<div class="field checkbox">
-							<input type="checkbox" id="lightmode" />
-							<label for="lightmode"></label>
+							<input type="checkbox" id="theme-toggler" />
+							<label for="theme-toggler"></label>
 							<span>Light Mode</span>
 						</div>	
 					</div>
@@ -113,20 +113,6 @@
 		<script src="https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js"></script>
 		<script src="/assets/js/highlight.min.js"></script>
 		<script src="/assets/js/highlightjs-copy.min.js"></script>
-		<script>
-			var lightmode = document.getElementById("lightmode");
-			var styleLink = document.createElement("link");
-			styleLink.rel = "stylesheet";
-			styleLink.href = "/assets/css/global.css";
-			document.head.appendChild(styleLink);
-
-			lightmode.addEventListener("change", function() {
-				if (lightmode.checked) {
-					styleLink.href = "/assets/css/global-light.css";
-				} else {
-					styleLink.href = "/assets/css/global.css";
-				}
-			});
-		</script>
+		<script src="/assets/js/theme-toggler.js"></script>
 	</body>
 </html>

client/js/theme-toggler.js

@@ -0,0 +1,22 @@
+var switch_theme_toggler = document.getElementById("theme-toggler");
+
+switch_theme_toggler.addEventListener("change", toggleTheme);
+
+function setTheme(themeName) {
+	localStorage.setItem("theme", themeName);
+	document.documentElement.className = themeName;
+}
+
+function toggleTheme() {
+	var currentTheme = localStorage.getItem("theme");
+	var newTheme = currentTheme === "theme-dark" ? "theme-light" : "theme-dark";
+
+	setTheme(newTheme);
+	switch_theme_toggler.checked = newTheme === "theme-light";
+}
+
+(function () {
+	var currentTheme = localStorage.getItem("theme") || "theme-dark";
+	setTheme(currentTheme);
+	switch_theme_toggler.checked = currentTheme === "theme-light";
+})();