https://ayty.org/assets/js/theme.js

1// Has to be in the head tag, otherwise a flicker effect will occur.
2
3let toggleTheme = (theme) => {
4  const themeImage = document.getElementById("theme-image");
5  if (theme == "dark") {
6    setTheme("light");
7    themeImage.src = "assets/img/ayty-black-transp.png";
8  } else {
9    setTheme("dark");
10    themeImage.src = "assets/img/ayty-white-transp.png";
11  }
12};
13
14let setTheme = (theme) => {
15  transTheme();
16  setHighlight(theme);
17  setGiscusTheme(theme);
18
19  if (theme) {
20    document.documentElement.setAttribute("data-theme", theme);
21
22    // Add class to tables.
23    let tables = document.getElementsByTagName("table");
24    for (let i = 0; i < tables.length; i++) {
25      if (theme == "dark") {
26        tables[i].classList.add("table-dark");
27      } else {
28        tables[i].classList.remove("table-dark");
29      }
30    }
31  } else {
32    document.documentElement.removeAttribute("data-theme");
33  }
34  localStorage.setItem("theme", theme);
35
36  // Updates the background of medium-zoom overlay.
37  if (typeof medium_zoom !== "undefined") {
38    medium_zoom.update({
39      background:
40        getComputedStyle(document.documentElement).getPropertyValue(
41          "--global-bg-color"
42        ) + "ee", // + 'ee' for trasparency.
43    });
44  }
45};
46
47let setHighlight = (theme) => {
48  if (theme == "dark") {
49    document.getElementById("highlight_theme_light").media = "none";
50    document.getElementById("highlight_theme_dark").media = "";
51  } else {
52    document.getElementById("highlight_theme_dark").media = "none";
53    document.getElementById("highlight_theme_light").media = "";
54  }
55};
56
57let setGiscusTheme = (theme) => {
58  function sendMessage(message) {
59    const iframe = document.querySelector("iframe.giscus-frame");
60    if (!iframe) return;
61    iframe.contentWindow.postMessage({ giscus: message }, "https://giscus.app");
62  }
63
64  sendMessage({
65    setConfig: {
66      theme: theme,
67    },
68  });
69};
70
71let transTheme = () => {
72  document.documentElement.classList.add("transition");
73  window.setTimeout(() => {
74    document.documentElement.classList.remove("transition");
75  }, 500);
76};
77
78let initTheme = (theme) => {
79  const themeImage = document.getElementById("theme-image");
80
81  if (theme == null || theme == "null") {
82    theme = localStorage.getItem("theme");
83    if (!theme) {
84      const userPref = window.matchMedia;
85      if (userPref && userPref("(prefers-color-scheme: light)").matches) {
86        theme = "light";
87      } else {
88        theme = "dark";
89      }
90    }
91  }
92
93  if (theme === "dark") {
94    document.documentElement.setAttribute("data-theme", "dark");
95  } else {
96    document.documentElement.removeAttribute("data-theme");
97  }
98
99  localStorage.setItem("theme", theme);
100  setTheme(theme);
101
102  const currentTheme = document.documentElement.getAttribute("data-theme");
103  if (currentTheme === "dark") {
104    themeImage.src = "assets/img/ayty-white-transp.png";
105  } else {
106    themeImage.src = "assets/img/ayty-black-transp.png";
107  }
108};
109
110window.addEventListener("DOMContentLoaded", function () {
111  initTheme(localStorage.getItem("theme"));
112});
113
114initTheme(localStorage.getItem("theme"));