add function to toggle dark mode

HectorVilas · Jan 14, 2023 · 88a729c · 88a729c
1 parent 9acc6e7
commit 88a729c
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/src/modules/ui.js b/src/modules/ui.js
@@ -24,6 +24,9 @@ export const ui = (() => {
     //create example projects if there's no localStorage
     todoHandler.loadSample();
 
+    //set dark mode if left active
+    loadDarkMode();
+
     const menuBtn = document.createElement("div");
     menuBtn.id = "menu-button";
     menuBtn.addEventListener("click", toggleMenu);
@@ -92,6 +95,8 @@ export const ui = (() => {
     const darkModeCheckbox = document.createElement("input");
     darkModeCheckbox.type = "checkbox";
     darkModeCheckbox.id = "dark-mode";
+    darkModeCheckbox.checked = todoHandler.isOnDarkMode();
+    darkModeCheckbox.addEventListener("change", toggleDarkMode);
     const darkModeLabel = document.createElement("label");
     darkModeLabel.innerText = "Dark mode";
     darkModeLabel.htmlFor = darkModeCheckbox.id;
@@ -917,5 +922,20 @@ export const ui = (() => {
     percentageDiv.style.opacity = thisProject.checks.length === 0 ? "0%" : "100%";
   }
 
+  function loadDarkMode(){
+    if(todoHandler.isOnDarkMode()) {
+      const root = document.querySelector(":root");
+      root.classList.add("dark");
+    };
+  }
+
+  function toggleDarkMode(){
+    const root = document.querySelector(":root");
+
+    this.checked ? root.classList.add("dark")
+    : root.classList.remove("dark");
+    todoHandler.darkMode(this.checked);
+  }
+
   return { placeCards, loadMenu };
 })();