https://eythor.com/site-family.js

1(() => {
2  "use strict";
3  const root = document.documentElement;
4  const preference = matchMedia("(prefers-color-scheme: dark)");
5  let choice;
6  try {
7    choice = localStorage.getItem("eyos-theme");
8  } catch (_) {}
9  function apply(theme) {
10    root.dataset.familyTheme = theme;
11    if (!document.body) return;
12    document.body.classList.toggle("light", theme === "light");
13    document.body.classList.toggle("light-mode", theme === "light");
14    document.body.classList.toggle("dark", theme === "dark");
15    const button = document.querySelector("#family-theme");
16    if (button) {
17      button.setAttribute(
18        "aria-label",
19        theme === "dark" ? "Switch to light mode" : "Switch to dark mode",
20      );
21      button.title = button.getAttribute("aria-label");
22    }
23    document
24      .querySelectorAll('meta[name="theme-color"]')
25      .forEach(
26        (meta) => (meta.content = theme === "dark" ? "#202620" : "#eeeae1"),
27      );
28  }
29  const current = () =>
30    choice === "dark" || choice === "light"
31      ? choice
32      : preference.matches
33        ? "dark"
34        : "light";
35  apply(current());
36  addEventListener("DOMContentLoaded", () => {
37    const tools = document.createElement("div");
38    tools.className = "family-tools";
39    tools.innerHTML =
40      '<a href="/" aria-label="Back to Eyþór homepage">Eyþór ↖</a><button id="family-theme" type="button"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><defs><mask id="family-moon"><rect width="24" height="24" fill="#000"/><circle cx="12" cy="12" r="7" fill="#fff"/><circle class="cut" cx="16" cy="10" r="7" fill="#000"/></mask></defs><circle cx="12" cy="12" r="7" fill="currentColor" stroke="none" mask="url(#family-moon)"/><g class="rays" stroke-linecap="round"><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/></g></svg></button>';
41    document.body.append(tools);
42    document.querySelector("#family-theme").addEventListener("click", () => {
43      choice = root.dataset.familyTheme === "dark" ? "light" : "dark";
44      apply(choice);
45      try {
46        localStorage.setItem("eyos-theme", choice);
47      } catch (_) {}
48    });
49    // Reapply after legacy DOM-ready handlers have initialized.
50    setTimeout(() => apply(current()), 0);
51  });
52  preference.addEventListener("change", () => apply(current()));
53  addEventListener("storage", (event) => {
54    if (event.key === "eyos-theme") {
55      choice = event.newValue;
56      apply(current());
57    }
58  });
59})();