Respect prefers-color-scheme CSS media query

[wilaak]

When switching between light and dark modes the theme does not update as you would expect. See other websites like ui.shadcn.com where setting this media query provides instant feedback.

[wilaak]

My current solution is to add this javascript snippet in the head of all pages which will always choose the media value.

(() => {
    const apply = () => {
        const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.classList.toggle('dark', prefersDark);
    };

    apply();

    matchMedia('(prefers-color-scheme: dark)').addEventListener('change', apply);
})();

[ab11yadmin]

I do something very similar, although your solution looks more succinct than mine.

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", (event) => {
    const mode = event.matches ? "dark" : "light";
    apply(
      mode === "dark"
        ? true
        : mode === "light"
          ? false
          : !document.documentElement.classList.contains("dark"),
    );
  });