Update site CSS to include dark mode toggle

IanWold · Sep 21, 2023 · 635962a · 635962a
1 parent 4d9babc
commit 635962a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/Static/site.css b/Static/site.css
@@ -35,6 +35,22 @@ a {
 
 
 
+#dark-mode-toggle {
+	border: 0;
+	background-color: transparent;
+	color: whitesmoke;
+
+	position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 999;
+}
+.dark #dark-mode-toggle {
+	color: #A0A0A0;
+}
+
+
+
 nav {
 	padding-top: 72px;
 	display: flex;

diff --git a/Templates/layout.liquid b/Templates/layout.liquid
@@ -16,6 +16,8 @@
 		</title>
 	</head>
 	<body>
+		<button id="dark-mode-toggle"><i data-feather="sun"></i></button>
+
 		<nav class="content">
 			<div class="headshot">
 				<img src="{{ directoryPrefix }}images/hero1.svg" />
@@ -66,6 +68,25 @@
 					observer.observe(section);
 				});
 			});
+
+			const darkModeToggle = document.getElementById("dark-mode-toggle");
+			const body = document.body;
+
+			function toggleDarkMode() {
+				body.classList.toggle("dark");
+
+				if (localStorage.getItem("dark") === "enabled") {
+					localStorage.setItem("dark", "disabled");
+				} else {
+					localStorage.setItem("dark", "enabled");
+				}
+			}
+
+			darkModeToggle.addEventListener("click", toggleDarkMode);
+
+			if (localStorage.getItem("dark") === "enabled") {
+				toggleDarkMode();
+			}
 		</script>
 	</body>
 </html>