https://p-yi.github.io/assets/js/theme.js

1// Theme handling (system -> dark -> light), loaded in <head> to avoid a flash of the wrong theme.
2(function () {
3  var KEY = "theme";
4
5  function getSetting() {
6    try {
7      var s = localStorage.getItem(KEY);
8      if (s === "dark" || s === "light" || s === "system") return s;
9    } catch (e) {}
10    return "system";
11  }
12
13  function resolve(setting) {
14    if (setting !== "system") return setting;
15    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
16  }
17
18  function apply(setting) {
19    var root = document.documentElement;
20    root.setAttribute("data-theme-setting", setting);
21    root.setAttribute("data-theme", resolve(setting));
22  }
23
24  apply(getSetting());
25
26  window.toggleTheme = function () {
27    var order = ["system", "dark", "light"];
28    var next = order[(order.indexOf(getSetting()) + 1) % order.length];
29    try {
30      localStorage.setItem(KEY, next);
31    } catch (e) {}
32    var root = document.documentElement;
33    root.classList.add("transition");
34    window.setTimeout(function () {
35      root.classList.remove("transition");
36    }, 500);
37    apply(next);
38  };
39
40  if (window.matchMedia) {
41    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () {
42      if (getSetting() === "system") apply("system");
43    });
44  }
45})();