prefers-color-scheme

Simple example using the "prefers-color-scheme" media query in both CSS and JS.

HTML

<div>
  Default Colour Scheme
</div>

<div class="prefered">
  Prefered Colour Scheme: <span class="mode"></span>
</div>

CSS

div {
  border: solid 1px #000000;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 2rem;
}

@media (prefers-color-scheme: dark) {
  .prefered {
    background-color: #000000;
    color: #6EE090;
  }
}

@media (prefers-color-scheme: light) {
  .prefered {
    background-color: #EEEEEE;
    color: #970955;
  }
}

JavaScript

var mode = $(".mode");
var schemes = ["no-preference", "light", "dark"];

var setColourSchemeTextFn = function (text) {
	return function (mql) {
    if (mql.matches) {
      mode.text(text);
    }
  }
};

var registerMediaListener = function (scheme) {
	var mql = window.matchMedia("(prefers-color-scheme: " + scheme + ")");
  var handler = setColourSchemeTextFn(scheme);
  mql.addListener(handler);
  handler(mql);
};

schemes.forEach(registerMediaListener);