Match Media Theme - JavaScript Client

matchMedia reads a CSS media query from JavaScript and updates the page when the preference changes.

Program

matchMedia connects JavaScript to media query state such as viewport width or color scheme preference.

match_media_theme.html

<main id="shell" class="panel">Theme follows system</main>
<script>
  const shellEl = document.querySelector("#shell");
  const query = matchMedia("(prefers-color-scheme: dark)");
  function apply(event) {
    shellEl.dataset.scheme = event.matches ? "dark" : "light";
  }
  apply(query);
  query.addEventListener("change", apply);
</script>

matchMedia matchMedia evaluates a CSS media query from JavaScript.

change event A media query list can notify code when its matches value changes.