Issue #expressjs#1382: work on JS and CSS

css/theme.css

@@ -1,26 +1,35 @@
 :root {
-    --main_dark_bg: #010409;
-    --second_dark_bg: #0d1117;
-    --dark_text: #e6edf3;
-  }
+  --main_dark_bg: #010409;
+  --second_dark_bg: #0d1117;
+  --dark_text: #e6edf3;
+}
 #theme-icon-container {
-  float : right;
+  float: right;
   background-color: var(--second_dark_bg);
-  color:white;
+  color: white;
   min-width: 50px;
 }
 .dark-mode-body {
-    background: var(--main_dark_bg);
-    --dark_text: whitesmoke;
-    background: var(--main_dark_bg);
-    color: var(--dark_text);
-  }
-  #blm-banner.dark-mode {
-    background-color: var(--main_dark_bg);
-    /* color: var(--dark_text); */
-  }
-  header {
-    background-color: var(--second_dark_bg);
-    color: var(--dark_text);
+  background: var(--main_dark_bg);
+  --dark_text: whitesmoke;
+  background: var(--main_dark_bg);
+  color: var(--dark_text);
+}
+#blm-banner.dark-mode {
+  background-color: var(--main_dark_bg);
+  color: var(--dark _text);
+}
+header.dark-mode {
+  background-color: var(--second_dark_bg);
+  color: var(--dark_text);
+}
+#logo.dark-mode > a {
+  color: var(--dark_text);
+}
+#navbar.dark-mode ul#navmenu  li.dropit-trigger a{
+  color: var(--dark_text);
+}
+#navbar.dark-mode ul#navmenu li a {
+  color: var(--dark_text);
+}
 
-  }

js/theme.js

@@ -1,4 +1,41 @@
 
 // theme toggle
-const darkModeToggle = document.querySelector('.theme-toggle');
-console.log(darkModeToggle);
+const themeToggleSwitch = document.querySelector('.theme-toggle');
+// console.log(themeToggleSwitch)
+// const currentTheme = themeToggleSwitch.classList.contains('darkmode-theme') ? 'DARK' : 'DEFAULT'
+(() =>{
+    localStorage.setItem("darkmode", "true")
+    const isDarkMode = localStorage.getItem("darkmode")
+    console.log(isDarkMode)
+    if (isDarkMode === "true") {
+        loadDarkMode()
+        // remove default theme class
+        // load dark mode
+    } else {
+        // do nothing
+    }
+})();
+themeToggleSwitch.addEventListener('click', toggleTheme)
+
+function loadDarkMode() {
+    document.body.classList.add('dark-mode-body', 'dark-mode')
+    const banner = document.querySelector('#blm-banner')
+    banner.classList.add('dark-mode')
+    const header = document.querySelector('header')
+    header.classList.add('dark-mode')
+    const logo = document.querySelector('#logo')
+    logo.classList.add('dark-mode')
+    const navbar= document.querySelector('#navbar')
+    navbar.classList.add('dark-mode')
+}
+function toggleTheme(e) {
+    const isDarkMode = localStorage.getItem("darkmode")
+    co
+    if (isDarkMode) {
+        // remove default theme class
+        // load dark mode
+    } else {
+        // do nothing
+    }
+
+}