<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
  <style>
    :root {
      --var-bgcolor: #fff;
      --var-fontcolor: #000;
    }

    [data-theme="dark"] {
      --var-bgcolor: #333;
      --var-fontcolor: #eee;
    }

    body {
      background-color: var(--var-bgcolor);
      color: var(--var-fontcolor);
    }
  </style>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const theme = localStorage.getItem('theme');
    const check = document.querySelector("input")
    if (theme === 'dark') {
      document.documentElement.dataset.theme = 'dark';
      check.checked=true;
    }
  });
</script>

</head>
<body>
  <label>
    <input onchange="changeTheme(this.checked)" type="checkbox" />
    Включить темную тему
  </label>
  <script>
    function changeTheme(isChecked) {
      const theme = isChecked ? 'dark' : 'light';
      document.documentElement.dataset.theme = theme;
      localStorage.setItem('theme', theme);
    }
  </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.