How do I toggle between light and dark mode using CSS variables without JavaScript?

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

      [data-theme="dark"] {
        --bg-color: black;
        --text-color: white;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
      }

      input[type="checkbox"] {
        display: none;
      }

      label {
        cursor: pointer;
        padding: 10px;
        background-color: #ccc;
        border-radius: 5px;
      }

      input[type="checkbox"]:checked ~ body {
        background-color: var(--bg-color);
        color: var(--text-color);
      }
    </style>

    <input type="checkbox" id="theme-toggle">
    <label for="theme-toggle">Toggle Theme</label>
    <!-- END COPY / PASTE -->