Javascript: const themeButton = document.getElementById('theme-button') const darkTheme = 'dark-theme' const iconTheme = 'uil-sun' // 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 = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun' // 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) themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme) } // Activate / deactivate the theme manually with the button themeButton.addEventListener('click', () => { // Add or remove the dark / icon theme document.body.classList.toggle(darkTheme) themeButton.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()) }) CSS .body.dark-theme{ /* HSL color mode */ --first-color-second: hsl(var(--hue-color), 30%, 8%); --title-color: hsl(var(--hue-color), 8%, 95%); --text-color: hsl(var(--hue-color), 8%, 75%); --input-color: hsl(var(--hue-color), 29%, 16%); --body-color: hsl(var(--hue-color), 28%, 12%); --container-color: hsl(var(--hue-color),29%, 16%); } /*========== Button Dark/Light ==========*/ .nav__btns{ display: flex; align-items: center; } .change-theme{ position: absolute; right: 1rem; top: 1.8rem; color: var(--text-color); font-size: 1rem; cursor: pointer; } .change-theme:hover{ color: var(--first-color-alt); } HTML