https://sihags.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  if (theme) {
15    document.documentElement.setAttribute("data-theme", theme);
16  }
17  else {
18    document.documentElement.removeAttribute("data-theme");
19  }
20  localStorage.setItem("theme", theme);
21  
22  // Updates the background of medium-zoom overlay.
23  if (typeof medium_zoom !== 'undefined') {
24    medium_zoom.update({
25      background: getComputedStyle(document.documentElement)
26          .getPropertyValue('--global-bg-color') + 'ee',  // + 'ee' for trasparency.
27    })
28  }
29};
30
31
32let transTheme = () => {
33  document.documentElement.classList.add("transition");
34  window.setTimeout(() => {
35    document.documentElement.classList.remove("transition");
36  }, 500)
37}
38
39
40let initTheme = (theme) => {
41  if (theme == null) {
42    const userPref = window.matchMedia;
43    if (userPref && userPref('(prefers-color-scheme: dark)').matches) {
44        theme = 'dark';
45    }
46  }
47  setTheme(theme);
48}
49
50
51initTheme(localStorage.getItem("theme"));