Add Light Mode (#72)

* Create global-light.css

Light Mode CSS code


---------

Co-authored-by: Ramon <[email protected]>

client/css/global-light.css

@@ -0,0 +1,53 @@
+@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/html/index.html

@@ -91,6 +91,11 @@
 							<label for="switch"></label>
 							<span>Web Access</span>
 						</div>
+						<div class="field checkbox">
+							<input type="checkbox" id="lightmode" />
+							<label for="lightmode"></label>
+							<span>Light Mode</span>
+						</div>	
 					</div>
 				</div>
 			</div>
@@ -108,5 +113,20 @@
 		<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>
 	</body>
 </html>