Add one class and remove other in javascript

Question

I'm trying to make dark light mode with javascript and local storage but something is not right. Here is the code for toggle icon

<i class="fa-regular fa-moon change-theme" title="Theme" id="theme-button"></i>

and here is js code

const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'fa-sun'


const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')


const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'fa-moon' : 'fa-sun'


if (selectedTheme) {
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'fa-moon' ? 'add' : 'remove'](iconTheme)
}


themeButton.addEventListener('click', () => {
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
})

When I click icon it adds fa-sun to class attribute and removes it when I click again, but class fa-moon is never removed from class attribute and sun icon is not shown.

Is your answer in [How can I change an element's class with JavaScript?](https://stackoverflow.com/a/196038/13969786)? — configtheworld, Sep 24 '22 at 23:08
No, it's not...question is where is the mistake in my code above — masterdeki, Sep 24 '22 at 23:14
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/replace — Mister Jojo, Sep 24 '22 at 23:35
why `darkTheme = 'dark-theme'` and not `darkTheme = 'fa-moon'` ? — Mister Jojo, Sep 24 '22 at 23:45
@DimitrisMaragkos I changed your code little bit and finaly manage to fix it...problem solved, thank you all — masterdeki, Sep 25 '22 at 02:11

score 0 · Answer 1 · answered Sep 25 '22 at 02:18

Here is how I fixed it...first I changed icon in html code to this

<i class="fa-regular fa-sun change-theme" title="Theme" id="theme-button"></i>

and then changed js like this

const themeButton = document.getElementById('theme-button');
const darkTheme = 'dark-theme';
const darkIcon = 'fa-sun';
const lightIcon = 'fa-moon';

const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
const getCurrentIcon = () => themeButton.classList.contains(lightIcon) ? lightIcon : darkIcon;

document.body.classList.add(darkTheme);
themeButton.classList.add(selectedTheme === 'dark' ? lightIcon : darkIcon);

themeButton.addEventListener('click', () => {

  document.body.classList.toggle(darkTheme);
  themeButton.classList.toggle(darkIcon);
  themeButton.classList.toggle(lightIcon);

  localStorage.setItem('selected-theme', getCurrentTheme());
  localStorage.setItem('selected-icon', getCurrentIcon());
});

and now it's working like I wanted-when dark mode is on there is a sun icon and when clicked on sun lite mode is on and moon icon showed.

I wouldn't store both `selected-theme` and `selected-icon` in `localStorage`. Just theme is enough. You can figure out the icon based on the selected theme. — Dimitris Maragkos, Sep 25 '22 at 09:09

Add one class and remove other in javascript

1 Answers1