Merge branch 'master' of https://www.github.com/IanWold/ianwold.githu…

…b.io
IanWold · Oct 27, 2023 · 4f4c8e3 · 4f4c8e3
2 parents 6e7c3a8 + 1fe37c0
commit 4f4c8e3
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/Static/site.css b/Static/site.css
@@ -14,6 +14,10 @@ body {
 	grid-template-rows: 1fr 1fr 1fr 1fr 1fr auto;
 }
 
+body.dark {
+	background-color: #121212;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	display: block;
 }
@@ -29,12 +33,32 @@ a {
 	color: #323232;
 }
 
+.dark a {
+	color: white;
+}
+
 	a:hover {
 		color: orangered;
 	}
 
 
 
+#dark-mode-toggle {
+	border: 0;
+	background-color: transparent;
+	color: gainsboro;
+
+	position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 999;
+}
+.dark #dark-mode-toggle {
+	color: #A0A0A0;
+}
+
+
+
 nav {
 	padding-top: 72px;
 	display: flex;
@@ -54,6 +78,9 @@ nav {
 			font-weight: 800;
 			color: #0A0A0A;
 		}
+		.dark nav .title a {
+			color: #f0f0f0;
+		}
 
 			nav .title a:hover {
 				color: orangered;
@@ -95,12 +122,18 @@ nav {
 	margin-right: auto;
 	color: #121212;
 }
+.dark .content {
+	color: #f0f0f0;
+}
 
 
 
 .section-gray {
 	background-color: whitesmoke;
 }
+.dark .section-gray {
+	background-color: #222222;
+}
 
 
 
@@ -257,6 +290,10 @@ header {
 		border-right: 1px solid gainsboro;
 		font-weight: 200;
 	}
+	.dark .pane a {
+		color: #9a9a9a;
+		border-color: #808080;
+	}
 
 		.pane a b {
 			font-weight: 500;
@@ -265,10 +302,16 @@ header {
 		.pane a:hover, .pane a:focus, .pane li.active > a {
 			color: black;
 		}
+		.dark .pane a:hover, .pane a:focus, .pane li.active > a {
+			color: white;
+		}
 
 	.pane li.active > a {
 		border-right: 1px solid black;
 	}
+	.dark .pane li.active > a {
+		border-right: 1px solid white;
+	}
 
 
 
@@ -329,6 +372,11 @@ header {
 			padding-right: 5px;
 		}
 
+		.dark .post p code {
+			background-color: #363636 !important;
+			border: 1px solid #424242;
+		}
+
 		.post ul {
 			list-style-type: disc;
 			list-style-position: inside;
@@ -378,6 +426,9 @@ header {
 			border: 1px solid gainsboro;
 			border-radius: 3px;
 		}
+		.dark .post p img {
+			border-color: #424242;
+		}
 
 
 
@@ -443,6 +494,9 @@ footer {
 	padding-bottom: 24px;
 	background-color: #323232;
 }
+.dark footer {
+	background-color: #121212;
+}
 
 	footer .feather {
 		width: 16px;

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") {
+				body.classList.toggle("dark");
+			}
 		</script>
 	</body>
 </html>