Search code examples
javascripthtmllocal-storageonloaddarkmode

How to set light/dark mode across multiple pages?


I am trying to use localStorage to keep my theme consistent over page changes but I can't seem to get it to work.

This is what my html looks like:

<body onload="checkLightMode()">

<li><button class="mode-toggle"><i class="fas fa-sun fa-2x"></i></button></li>

And the JavaScript:

const button = document.querySelector
'.mode-toggle')

button.addEventListener('click', function () {
  localStorage.setItem('light-mode', true)
  if (localStorage.getItem('light-mode')) {
    document.body.classList.toggle('light-mode')
    document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.toggle('fa-moon'))
  } else {
    document.body.classList.remove('light-mode')
    localStorage.setItem('light-mode', false)
  }
})

function checkLightMode() {
  if (localStorage.getItem('light-mode')) {
    body.classList.add('light-mode')
  }
}

Solution

  • I was able to get it to work! Here is what did the trick. It ended up being quite simple, and I didn't need the onload function.

    const buttons = document.querySelectorAll('.mode-toggle')
    
    buttons.forEach(button => {
      button.addEventListener('click', function () {
        document.body.classList.toggle('light-mode')
        document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.toggle('fa-moon'))
    
        if (document.body.classList.contains('light-mode')) {
          localStorage.setItem('lightMode', 'enabled')
        } else {
          localStorage.setItem('lightMode', 'disabled')
        }
      })
    })
    
    if (localStorage.getItem('lightMode') === 'enabled') {
      document.body.classList.add('light-mode')
      document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.add('fa-moon'))
    }