How to implement a dark mode toggle in Oxygen

Dark mode is all the rage these days. Here's some code which can go straight into a code block to give you a dark mode toggle in Oxygen Builder.

HTML

<button id="toggle">
</button>

CSS

The CSS can of course be adapted to customise the appearance of the toggle button (i.e. adding a background image), and how your dark mode will look.

body {
  background-color: #ffffff;
  transition: 0.3s;
}

body.night {
  background-color: #010101;
  color: #f6f6f6;
  transition: 0.3s;
}

#toggle {
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transition: 0.3s;
  z-index: 10;
  border: 1px solid #fff;
  cursor: pointer;
}

body.night #toggle {
  box-shadow: 0 0 20px -2px #ffffff;
}

#toggle:focus {
  outline: none;
}

JS

var button = document.getElementById("toggle");

if(button){
  button.addEventListener('click', () => {
    document.body.classList.toggle('night');
    localStorage.setItem('theme', document.body.classList.contains('night') ? 'night' : 'light');
  });
}

if (localStorage.getItem('theme') === 'night') {
    document.body.classList.add('night');
}

When the user clicks the toggle button, their preference is saved in local storage and retained if they go on to visit a different page.