<html>
  <body>
    <h1>Testing Dark Mode (by default)!</h1>
    <p>So, you want to add dark mode to your website?  This defaults your site to dark but allows the visitor to use light more, if they wish.</p>
    <img src="https://jws.dev/qrcode.svg">
  </body>
</html>
body {
	  background-color: black;
	  color: white;
	}
  img {
    width:40%;
    -webkit-filter: invert(1);
          filter: invert(1);
  }
	@media screen and (prefers-color-scheme: light) {
		body {
		  background-color: white;
		  color: black;
		}
  img {
    width:40%;
    -webkit-filter: invert(0);
          filter: invert(0);
  }
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.