How to set light/dark mode across multiple pages?-CodePudding

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 onl oad="checkLightMode()">

<li><button ><i ></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')
  }
}

CodePudding user response：

I can't use local storage in sandbox code snippet so I did it with variable, it should be the same concept.

const button = document.querySelector('.mode-toggle')
var isTrueSet = (value) => value === 'true';

let lightMode = false; 
button.addEventListener('click', function () {
  const v = localStorage.getItem('light-mode');
  if (!lightMode) { // change to (!v && !isTrueSet(v))
    document.body.classList.add('light-mode')
    lightMode = true
    
  } else {
    lightMode = false
    document.body.classList.remove('light-mode')
  }
})

function checkLightMode() {
  const v = localStorage.getItem('light-mode');

  if (lightMode) { // (!v && !isTrueSet(v))
    body.classList.add('light-mode')
  }
}

body {
background-color: #000;
width: 100%;
height: 100%;
}

.light-mode {
background-color: #fff;
}

<div id="one" onl oad="checkLightMode()">

<li><button >mode</button></li>
</div>

CodePudding user response：

I create a state.js file, which will be the first module that loads. (Following angular methodology).

There I put all global variables. I think it's easy to handle and suits your needs.

state.js

let lightMode = false;

main.js

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

button.addEventListener('click', function () {

  if (!lightMode) {
    document.body.classList.add('light-mode')
    lightMode = true
    
  } else {
    lightMode = false
    document.body.classList.remove('light-mode')
  }
})

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

With this method you would create this variable more than once, It's stays in an organized file, And it is easy to maintain.

CodePudding user response：

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 onl oad 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'))
}