Light and dark

Following advice in the article Native HTML light and dark color scheme switching from the wonderful HTMLHell website, I've added light and dark color controls to this site.

I've been wanting to do this for a while and finally got around to it. It uses the light-dark CSS function which is now widely supported.

The controls are in the bottom right of the page. If you can't see them then you're using a browser that doesn't support the light-dark CSS function. The fallback is the browser's default color scheme.

How it works

Some HTML:

<html>
  <head>
    <meta name="color-scheme" content="auto">
  </head>
  <body>
    <section class="scheme-switcher" aria-label="Color scheme switcher">
      <button aria-pressed="false" value="light">
        Light
      </button>
      <button aria-pressed="true" value="light dark">
        Auto
      </button>
      <button aria-pressed="false" value="dark">
        Dark
      </button>
    </section>			
  </body>
</html>

A little CSS (as an example):

body {
  background-color: light-dark(white, black);
}

A some JavaScript to wire it up (simplified):

button.addEventListener("click", () => {
  colorScheme.content = button.value;
  button.setAttribute("aria-pressed", true);
  localStorage.setItem("color-scheme", button.value);
});

As a bonus, make the controls only show up if the browser supports the light-dark CSS function:

.scheme-switcher {
  display: none;
}

@supports (color: light-dark(black, white)) {
  .scheme-switcher {
    display: flex;
  }
}

Conclusion

Some things I like about this implementation:

Supported on most modern browsers and doesn't screw things up for those that don't.