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.


<button id="toggle">


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;


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

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

if (localStorage.getItem('theme') === '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.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram