New changes

index.js

@@ -9,8 +9,8 @@ function handleClick() {
 optionListItem.addEventListener('click', handleClick)
 
 /*=============== SHOW MENU ===============*/
+/*
 const showMenu = (toggleId) => {
-    const toggle = document.getElementById(toggleId)
 
     toggle.addEventListener('click', () => {
         // Add show-menu class to nav menu
@@ -20,4 +20,35 @@ const showMenu = (toggleId) => {
     })
 }
 showMenu('toggle-box')
+-*/
+
+/*=============== DARK LIGHT THEME ===============*/
+const toggle = document.getElementById('toggle-box')
+const darkTheme = 'dark-theme'
+const iconTheme = 'toggle-icon'
+
+// Previously selected topic (if user selected)
+const selectedTheme = localStorage.getItem('selected-theme')
+const selectedIcon = localStorage.getItem('selected-icon')
+
+// We obtain the current theme that the interface has by validating the dark-theme class
+const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
+const getCurrentIcon = () => toggle.classList.contains(iconTheme) ? 'toggle-icon' : ''
+
+// We validate if the user previously chose a topic
+if (selectedTheme) {
+    // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
+    document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
+    toggle.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme)
+}
+
+// Activate / deactivate the theme manually with the button
+toggle.addEventListener('click', () => {
+    // Add or remove the dark / icon theme
+    document.body.classList.toggle(darkTheme)
+    toggle.classList.toggle(iconTheme)
+    // We save the theme and the current icon that the user chose
+    localStorage.setItem('selected-theme', getCurrentTheme())
+    localStorage.setItem('selected-icon', getCurrentIcon())
+})
 

styles.css

@@ -191,7 +191,7 @@ h4 {
 .toggle__box {
     cursor: pointer;
 }
-.show-menu {
+.toggle-icon {
     justify-content: flex-start;
 }