https://xai-uncertainty.github.io/assets/js/theme.js

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