JSFiddle - React, Tailwind, and code Playground

HTML

<main id='main'>
<button id='btn'></button>
</main>

CSS

body {
  margin: 0;
  overflow: hidden;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightgray;
  transition: 300ms background-color;
}

.dark {
  background: darkblue;
}

JavaScript

window.onload = render()

btn.addEventListener('click', e => {
	const theme = localStorage.getItem('theme')
	localStorage.setItem('theme', theme === 'dark' ? 'light' : 'dark')
  render()
})

function render() {
	const theme = localStorage.getItem('theme')

  if(theme === 'dark') {
    btn.textContent = 'go light'
    main.classList.add('dark')
  } else {
    btn.textContent = 'go dark'
    main.classList.remove('dark')
  }
}