From 43c7ca694b715b4300d3db635808330532329500 Mon Sep 17 00:00:00 2001
From: Noah Garland <noahgarland02@gmail.com>
Date: Tue, 4 Jul 2023 11:58:15 -0500
Subject: [PATCH] Added dark mode

---
 index.html       |  1 +
 static/script.js | 27 +++++++++++++++++++++++++++
 static/style.css | 30 ++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+)

diff --git a/index.html b/index.html
index 3bd4726..5997610 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,7 @@ <h1>Candy Calc</h1>
 
         <p id="log" hidden></p>
     </section>
+    <br><button type="button" id="darkModeButton" class="darkButton"><u>Dark Mode</u></button><br>
     <section id="faq">
         <h2>FAQ</h2>
         <dl>
diff --git a/static/script.js b/static/script.js
index 3ee820c..263cf7c 100644
--- a/static/script.js
+++ b/static/script.js
@@ -241,3 +241,30 @@ $( document ).ready( function() {
 } );
 
 } )();
+
+//Darkmode toggle button
+var darkModeButton = document.getElementById("darkModeButton");
+if(darkModeButton) {
+    darkModeButton.addEventListener("click", function() {
+        document.body.classList.toggle("dark-mode");
+        var isDarkMode = document.body.classList.contains("dark-mode");
+        localStorage.setItem("darkMode", isDarkMode)
+
+        if(isDarkMode) {
+            darkModeButton.innerHTML = "<u>Light Mode</u>";
+        } else {
+            darkModeButton.innerHTML = "<u>Dark Mode</u>";
+        }
+      });
+}
+
+//Keeps dark mode between page loads
+window.addEventListener("load", function() {
+    var darkMode = this.localStorage.getItem("darkMode");
+    if(darkMode === "true") {
+        this.document.body.classList.add("dark-mode");
+        darkModeButton.innerHTML = "<u>Light Mode</u>";
+    } else {
+        darkModeButton.innerHTML = "<u>Dark Mode</u>";
+    }
+})
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 0ee7b90..fe40aa4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -383,3 +383,33 @@ footer {
     margin-left: 8em
   }
 }
+
+.darkButton {
+  background-color: white;
+  cursor: pointer;
+  display: block;
+  margin: 0 auto;
+}
+
+.dark-mode,
+.dark-mode .darkButton, 
+.dark-mode a {
+  background-color: #313131;
+  color: white;
+}
+
+.dark-mode #faq tbody tr:nth-of-type(2n+1) {
+  background: #222222
+}
+
+.dark-mode #calc, .dark-mode #calc a{
+  color: black;
+}
+
+.dark-mode #calc a {
+  background-color: #dc6a9d;
+}
+
+.dark-mode #faq h2 {
+  background-color: #222222;
+}
\ No newline at end of file