From 47a657a36c2654855ec9bd770ea52e10341f182d Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@triptease.com>
Date: Tue, 26 Sep 2023 15:01:55 +0100
Subject: [PATCH] Rudimentary colour scheme switcher

---
 .nvmrc                 |  2 +-
 src/_includes/base.njk | 64 ++++++++++++++++++++++++++++++++++++++++++
 src/css/globals.css    | 14 +++++++++
 3 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/.nvmrc b/.nvmrc
index 2f3b977..6aab9b4 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v18.15.0
\ No newline at end of file
+v18.18.0
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
index fea4beb..0d79130 100644
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -34,10 +34,74 @@
 					<li><a href="/links">Links</a></li>
 				</ul>
 			</nav>
+			<color-scheme-toggle></color-scheme-toggle>
 		</header>
 		{{ content | safe }}
 		<footer>
 			<div class="wrapper-lg">Copyright &copy; {{ today.year }} {{ metadata.author.name }}</div>
 		</footer>
+
+		<template id="color-scheme-toggle">
+			<fieldset>
+				<legend>Change your colour scheme</legend>
+				<label>
+					<input type="radio" name="color-scheme" value="dark" />
+					Dark
+				</label>
+				<label>
+					<input type="radio" name="color-scheme" value="light" />
+					Light
+				</label>
+			</fieldset>
+		</template>
+		<script type="text/javascript">
+			window.customElements.define("color-scheme-toggle", class extends HTMLElement {
+				constructor() {
+					super();
+
+					const template = document.getElementById("color-scheme-toggle");
+					const templateNode = template.content.cloneNode(true);
+
+					this.appendChild(templateNode);
+				}
+
+				getColourScheme = () => {
+					const colourScheme = localStorage.getItem('color-scheme');
+
+					if (colourScheme) {
+						return colourScheme;
+					}
+
+					if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
+						return "dark";
+					}
+
+					return "light";
+				}
+
+				onColourSchemeChange = (e) => {
+					localStorage.setItem('color-scheme', e.target.value);
+					this.updateComponents();
+				}
+
+				updateComponents = () => {
+					this.querySelectorAll('[name="color-scheme"]').forEach(radio => {
+						radio.checked = this.getColourScheme() === radio.value;
+					});
+
+					if (localStorage.getItem('color-scheme')) {
+						document.body.setAttribute('data-color-scheme', this.getColourScheme());
+					}
+				}
+
+				connectedCallback() {
+					this.querySelectorAll('[name="color-scheme"]').forEach(radio => {
+						radio.addEventListener('change', this.onColourSchemeChange);
+					});
+
+					this.updateComponents();
+				}
+			});
+		</script>
 	</body>
 </html>
diff --git a/src/css/globals.css b/src/css/globals.css
index a35fee6..6046989 100644
--- a/src/css/globals.css
+++ b/src/css/globals.css
@@ -14,6 +14,20 @@
     }
 }
 
+body[data-color-scheme="light"] {
+    --color-secondary: var(--color-neutral-100);
+    --color-primary: var(--color-neutral-800);
+    --color-decoration: var(--color-amber-800);
+    --color-subtle: var(--color-zinc-500);
+}
+
+body[data-color-scheme="dark"] {
+    --color-primary: var(--color-neutral-200);
+    --color-secondary: var(--color-neutral-800);
+    --color-decoration: var(--color-amber-200);
+    --color-subtle: var(--color-zinc-400);
+}
+
 body {
     background-color: var(--color-secondary);
     color: var(--color-primary);