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

<!-- BEGIN COPY / PASTE -->
    <style>
      :root {
        --background-color: white;
        --text-color: black;
      }
      
      body {
        background-color: var(--background-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
      }
      
      .dark-mode {
        --background-color: black;
        --text-color: white;
      }
    </style>

    <button onclick="toggleDarkMode()">Toggle Dark Mode</button>

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