Donker & licht modus

<input id="dark-mode" type="checkbox" checked/>
  <label for="dark-mode">
    Donker & licht
  </label>
  <div>
    <h1>Donker en licht</h1>
    <strong>Klik op de checkbox om het donkere modus te uit te zetten.</strong> 
    <p>
      Send email sneeze thud purr purr dying slumber stretch fur real feed me creep wiggles oops. Kitty crinkle greebles pawsome roll curiosity help rip freeze feed me now tripping maybe. Spicy fly soft wash crunch sweet sleep yawn wiggle butt munch stare sunbeam. Loaf check sharp flop loaf stretch loaf hack catch nip scoot feral wiggle butt. Soon laptop rumble crazy dying door nap let me in keyboard judge prrr. Greebles let me in helping now scaredy cat sunbeam biscuits meow groom.
    </p> 
  </div>
        

:root {
    color-scheme: light dark;
    --dark-color: black;
    --light-color: snow;
  }
  
  body {
    color-scheme: light;
    padding: 20px;
    background-color: light-dark(
      var(--light-color), 
      var(--dark-color)
    );
    color: light-dark(
      var(--dark-color), 
      var(--light-color)
    );
  }
  
  a {
    color: var(--light-color);
  }
  
  p {
    opacity: 0.6;
  }
  
  :root:has(#dark-mode:checked) {
    color-scheme: dark;
    body {
      color-scheme: dark;
    }
  }