https://xiuyuliang.cn/js/theme.js

1// Light/dark theme controller.
2// The current theme is applied EARLY by a tiny inline snippet in each page's
3// <head> (before the stylesheet) to avoid a flash of the wrong theme:
4//   <script>(function(){try{var t=localStorage.getItem("theme")||"light";
5//     document.documentElement.setAttribute("data-theme",t);}catch(e){}})();</script>
6// The site defaults to LIGHT; dark mode is opt-in via the navbar toggle and
7// persists in localStorage. This file wires up the toggle button and keeps
8// its icon in sync.
9(function () {
10  var KEY = "theme";
11
12  function current() {
13    try {
14      var saved = localStorage.getItem(KEY);
15      if (saved === "dark" || saved === "light") return saved;
16    } catch (e) {}
17    return "light";
18  }
19
20  function apply(theme) {
21    document.documentElement.setAttribute("data-theme", theme);
22    var icon = document.querySelector("#themeToggle i");
23    if (icon) {
24      icon.className = theme === "dark" ? "fas fa-sun" : "fas fa-moon";
25    }
26    var btn = document.getElementById("themeToggle");
27    if (btn) {
28      btn.setAttribute(
29        "aria-label",
30        theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
31      );
32    }
33  }
34
35  function init() {
36    apply(current());
37    var btn = document.getElementById("themeToggle");
38    if (btn) {
39      btn.addEventListener("click", function () {
40        var next = current() === "dark" ? "light" : "dark";
41        try {
42          localStorage.setItem(KEY, next);
43        } catch (e) {}
44        apply(next);
45      });
46    }
47  }
48
49  if (document.readyState === "loading") {
50    document.addEventListener("DOMContentLoaded", init);
51  } else {
52    init();
53  }
54})();