From 88a729c315f20befd0bd8df56a14bf27bcc72aed Mon Sep 17 00:00:00 2001
From: HectorVilas <96928935+HectorVilas@users.noreply.github.com>
Date: Sat, 14 Jan 2023 19:54:15 -0300
Subject: [PATCH] add function to toggle dark mode

---
 src/modules/ui.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/modules/ui.js b/src/modules/ui.js
index b53aeac..18c5428 100644
--- 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 };
 })();
\ No newline at end of file