JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<a href="#" class="darkmode-button" id="dmbutton">Dark Mode</a>

<div class="header-wrap">
  Testing toggle with session
</div>

CSS

.header-wrap {
  color: black;
}

body.dark {
  background-color: #666; 
}

body.dark .header-wrap {
  color: white;
  background-color: black;
}

JavaScript

let body = document.body;
let dmButton = document.querySelector('#dmbutton');

dmButton.addEventListener('click', e => {
  body.classList.toggle('dark');
  sessionStorage.setItem('darkmode', body.classList.contains('dark'));
  e.target.textContent = e.target.textContent.trim() === 'Dark Mode' ? 'Light Mode' : 'Dark Mode';
});

let darkModeEnabled = JSON.parse(sessionStorage.getItem('darkmode')); // boolean type coercion
if (darkModeEnabled) {
  body.classList.add('dark');
  dmButton.textContent = 'Light Mode';
}