How can I use CSS variables to theme a website and switch themes dynamically?

<!-- BEGIN COPY / PASTE -->
    <style>
      :root {
        --primary-color: #3498db;
        --background-color: #ffffff;
      }

      .dark-theme {
        --primary-color: #2c3e50;
        --background-color: #34495e;
      }

      body {
        background-color: var(--background-color);
        color: var(--primary-color);
      }
    </style>

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

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