Add Dark Mode Feature

app.js

@@ -363,3 +363,23 @@ const handleResolve = async () => {
         log(`❌ Rejected the color ${err}.`, true);
     };
 };
+
+// Function to toggle Dark Mode on or off
+function toggleDarkMode() {
+    // Get a reference to the document's body element
+    const body = document.body;
+
+    // Toggle the "dark-mode" class on the body element to change the theme
+    body.classList.toggle("dark-mode");
+
+    // Check if Dark Mode is active after toggling
+    const isDarkMode = body.classList.contains("dark-mode");
+
+    // Store the Dark Mode preference in local storage for future visits
+    localStorage.setItem("darkMode", isDarkMode);
+}
+
+// Check if the user has previously enabled Dark Mode and apply it
+if (localStorage.getItem("darkMode") === "true") {
+    document.body.classList.add("dark-mode");
+}

index.html

@@ -50,6 +50,15 @@
     <main>
         <header>
             <h1>🤝 PromiViz</h1>
+
+	    <!-- This code adds a button for toggling Dark Mode.
+     The button's click event is handled by JavaScript functions
+     that enable users to switch between light and dark themes. -->
+	    <div>
+    <span style="font-size:30px;cursor:pointer" onclick="toggleNav()">&#9776;</span>
+    <button id="dark-mode-toggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
+</div>
+
             <div>
                 <span style="font-size:30px;cursor:pointer" onclick="toggleNav()">&#9776;</span>
             </div>
@@ -228,4 +237,4 @@ <h2>Logs</h2>
 
     <script src="./app.js"></script>
 </body>
-</html>
+</html>

main.css

@@ -40,6 +40,13 @@ body.black {
     background-size: 100% 820px;
 }
 
+/* Dark Mode Styles */
+.dark-mode {
+    background-color: #333; /* Change to your preferred dark background color */
+    color: #fff; /* Change to your preferred dark text color */
+}
+/* Add any other styles for Dark Mode here */
+
 /* changes */
 select {
     height: 25px;