Dark & light mode

<input id="dark-mode" type="checkbox" checked/>
  <label for="dark-mode">
    Dark & light
  </label>
  <div>
    <h1>Dark and light</h1>
    <strong>Click the checkbox to turn dark mode off.</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;
    }
  }