blog.bythewood.me-wagtail

 1/**
 2 * dark.js
 3 *
 4 * Detects the systems current preference for dark or light mode but allows for
 5 * overriding the system preference.
 6 */
 7
 8const main = document.querySelector("main");
 9
10const getSystemPreference = () => {
11  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
12    return "dark";
13  } else {
14    return "light";
15  }
16};
17
18const setIcon = (preference) => {
19  const icons = document.querySelectorAll(".prefers-color-scheme-icon");
20  icons.forEach((icon) => {
21    icon.classList.add("d-none");
22  });
23  icons.forEach((icon) => {
24    if (icon.classList.contains(preference)) {
25      icon.classList.remove("d-none");
26    }
27  });
28};
29
30const setPreference = (preference) => {
31  setIcon(preference);
32  if (preference === "system") {
33    preference = getSystemPreference();
34  }
35  if (preference === "dark") {
36    main.classList.add("dark");
37  } else {
38    main.classList.remove("dark");
39  }
40};
41
42const select = document.querySelector("#prefers-color-scheme");
43select.addEventListener("change", () => {
44  localStorage.setItem("darkMode", select.value);
45  setPreference(select.value);
46});
47
48const storedPreference = localStorage.getItem("darkMode");
49if (storedPreference) {
50  select.value = storedPreference;
51  setPreference(storedPreference);
52} else {
53  setPreference("system");
54}