<table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<button class="btn-toggle">Toggle theme</button>

body {
  --color-text: #212121;
  --color-bg: #eaeaea;
}

body.dark-theme {
  --color-text: #eaeaea;
  --color-bg: #212121;

  background: var(--color-bg);
}

table {
  margin-block-end: 1rem;
}

th,
td {
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --text-color: #eaeaea;
    --bkg-color: #212121;
  }
  /* Override dark mode with light mode styles if the user decides to swap */
  body.light-theme {
    --color-text: #212121;
    --color-bg: #eaeaea;
  }
}

const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

btn.addEventListener("click", function () {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
  } else {
    document.body.classList.toggle("dark-theme");
  }
});