Merge pull request #36 from beeceej/dark-mode

Add ability to toggle between light/dark mode

Makefile

@@ -2,7 +2,8 @@ TEMPLATE        := templates
 OUTPUT          := output
 CONTENT         := content
 TPL             := $(wildcard $(TEMPLATE)/*.css) \
-                   $(shell find templates -name "*.html")
+                   $(shell find templates -name "*.html") \
+                   $(shell find templates -name "*.js")
 TPL_OUT         := $(patsubst $(TEMPLATE)%, $(OUTPUT)%, $(TPL))
 STATIC          := $(wildcard $(TEMPLATE)/*.png) \
                    $(wildcard $(TEMPLATE)/*.webp) \
@@ -20,6 +21,9 @@ $(OUTPUT)/%.html: beeceej.com $(TPL)
 $(OUTPUT)/%.css: beeceej.com $(TPL)
 	$(TEMPLATIZE) $@
 
+$(OUTPUT)/%.js: beeceej.com $(TPL)
+	$(TEMPLATIZE) $@
+
 $(OUTPUT)/%.png: beeceej.com $(STATIC)
 	cp $(TEMPLATE)/$(notdir $@) $@
 

templates/common.css

@@ -1,10 +1,17 @@
 {{define "common_css"}}
+
 body {
+	--link-text-color: grey;
+	--background-color: black;
+
 	font-size: 24px;
 	font-family: monospace;
 	text-align: center;
 	margin: 0 auto;
 	width: 80%;
+
+	background: var(--background-color)
+
 }
 @media only screen and (max-width: 600px) {
   body {
@@ -14,9 +21,8 @@ body {
 }
 
 a {
-	link-decoration: none;
 	text-decoration: none;
-	color: #02071f;
+	color: var(--link-text-color);
 }
 
 a:hover {

templates/common.js

@@ -0,0 +1,46 @@
+{{define "common-js"}}
+
+const cssMappings = {
+  dark: {
+    "--link-text-color": "grey",
+    "--background-color": "black",
+  },
+  light: {
+    "--link-text-color": "#02071f",
+    "--background-color": "white",
+  },
+};
+
+const root = document.querySelector(":root");
+
+function updateColors() {
+  if (JSON.parse(window.localStorage.getItem("dark-mode-enabled"))) {
+    Object.entries(cssMappings["dark"]).forEach(([key, value]) => {
+      document.body.style.setProperty(key, value);
+    });
+    return;
+  }
+  Object.entries(cssMappings["light"]).forEach(([key, value]) => {
+    document.body.style.setProperty(key, value);
+  });
+}
+
+function toggleDarkMode(event) {
+  const darkModeEnabled = window.localStorage.getItem("dark-mode-enabled");
+  if (darkModeEnabled === "null") {
+    window.localStorage.setItem("dark-mode-enabled", "true");
+    return;
+  }
+  window.localStorage.setItem(
+    "dark-mode-enabled",
+    !JSON.parse(window.localStorage.getItem("dark-mode-enabled")),
+  );
+  updateColors();
+}
+
+updateColors();
+
+document
+  .getElementById("dark-mode-toggle-button")
+  .addEventListener("click", toggleDarkMode);
+{{end}}

templates/footer.html

@@ -1,5 +1,7 @@
 {{ define "footer" }}
 <footer>
+  <button id="dark-mode-toggle-button">Light/Dark</button>
+  <br>
   <a href=https://github.com/beeceej/beeceej.com/tree/{{.CommitHash}}>beeceej/beeceej.com @ {{.CommitHash}}</a>
 </footer>
 {{ end }}

templates/index.html

@@ -33,6 +33,9 @@
 	{{end}}
 	{{- template "footer" . -}}
   </body>
+  <script>
+	{{- template "common-js" . -}}
+  </script>
 </html>
 {{end}}
 {{- template "index" . -}}

templates/nav.css

@@ -8,12 +8,13 @@ nav {
 	top: 0;
 	margin-bottom: 10px; /*Push content pages down a bit */
 	border-bottom: solid grey;
-	background-color: white;
+	background-color: var(--background-color);
+
 }
 
 /* Styles for the Nav Items */
 #nav-list {
 	text-transform: uppercase;
-	color: grey;
+	color: var(--link-text-color);
 }
 {{end}}

templates/nav.html

@@ -1,5 +1,5 @@
 {{define "nav"}}
-  <nav >
+  <nav>
 	<ul class="no-list-style" id="nav-list">
 	  <li><a href="/about.html"><h3>About</h3></a></li>
 	  <li><a href="/notes/l.html"><h3>Notes</h3></a></li>