How can I use CSS variables to create a light/dark theme switcher for my website?

<!-- BEGIN COPY / PASTE -->
    <style>
      :root {
        --background-color: white;
        --text-color: black;
      }

      .dark-theme {
        --background-color: black;
        --text-color: white;
      }

      body {
        background-color: var(--background-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
      }
    </style>

    <button onclick="toggleTheme()">Toggle Theme</button>

    <script>
      function toggleTheme() {
        document.body.classList.toggle('dark-theme');
      }
    </script>
    <!-- END COPY / PASTE -->