<html>
 <!-- more content ... -->
<div>
  <h1>Using dark mode!</h1>
  
  <h2>This is gold</h2>
  <h2 class="page1">This is green</h2>
  Hello! <button id="dark-mode-toggle">Toggle dark mode</button>
<div>
  <!-- more content ... -->
</html>
:root {
  --body-color: white;
  --font-color: black;
  --h1-color: gold;
}

[data-dark-mode] {
  --body-color: black;
  --font-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-color: black;
    --font-color: white;
  }
  #dark-mode-toggle {
    display: none;
  }
}

body {
  background-color: var(--body-color);
  color: var(--font-color);
}

h2.page1 {
  --h1-color: green;
}

h2 {
  color: var(--h1-color);
}

document.querySelector('#dark-mode-toggle').addEventListener('click', function() {
  document.querySelector('html').toggleAttribute('data-dark-mode')
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.