diff --git a/index.js b/index.js index 69d809f..6e60ead 100644 --- a/index.js +++ b/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()) +}) diff --git a/styles.css b/styles.css index 6621920..d697ae4 100644 --- a/styles.css +++ b/styles.css @@ -191,7 +191,7 @@ h4 { .toggle__box { cursor: pointer; } -.show-menu { +.toggle-icon { justify-content: flex-start; }