<button>Toggle</button>
<h1>Hello!</h1>
body[data-theme='light'] {
  --color-text: black;
  --color-background: white;
}

body[data-theme='dark'] {
  --color-text: white;
  --color-background: black;
}

body {
  color: var(--color-text);
  background: var(--color-background);
}
let mode = 'light';
function setTheme(theme) {
  mode = theme
  document.body.dataset.theme = theme
}

setTheme('light')

const btn = document.querySelector(
'button')

btn.addEventListener('click', () => {
  const nextMode = mode === 'light' ? 'dark' : 'light'
  setTheme(nextMode)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.