first commit

app/lib/useTheme.js

@@ -0,0 +1,73 @@
+import { computed } from "vue";
+import { useState } from "#app";
+function n(e) {
+  try {
+    let t = (e ?? globalThis.localStorage)?.getItem(`theme`);
+    if (t === `light` || t === `dark`) return t;
+  } catch {}
+  return `auto`;
+}
+var r = [`light`, `dark`, `auto`],
+  i = {
+    light: `浅色`,
+    dark: `深色`,
+    auto: `跟随系统`,
+  },
+  a = {
+    light: `pi pi-sun`,
+    dark: `pi pi-moon`,
+    auto: `pi pi-desktop`,
+  },
+  o = `theme`;
+function s() {
+  let s = useState(`theme-mode`, () => n()),
+    c = useState(
+      `theme-dark`,
+      () =>
+        typeof document < `u` &&
+        document.documentElement.classList.contains(`app-dark`),
+    ),
+    l = () => window.matchMedia(`(prefers-color-scheme: dark)`);
+  function u() {
+    c.value = s.value === `dark` || (s.value === `auto` && l().matches);
+  }
+  function d() {
+    let e = document.documentElement;
+    (e.classList.toggle(`app-dark`, c.value),
+      (e.style.colorScheme = c.value ? `dark` : `light`));
+  }
+  function f() {
+    (u(), d());
+  }
+  let p = null,
+    m = () => {
+      s.value === `auto` && f();
+    };
+  function h() {
+    (p?.removeEventListener(`change`, m), (p = null));
+  }
+  function g() {
+    (h(), (s.value = n()), f(), (p = l()), p.addEventListener(`change`, m));
+  }
+  function _(e) {
+    s.value = e;
+    try {
+      localStorage.setItem(o, e);
+    } catch {}
+    f();
+  }
+  function v() {
+    _(r[(r.indexOf(s.value) + 1) % r.length]);
+  }
+  return {
+    mode: s,
+    isDark: c,
+    init: g,
+    dispose: h,
+    set: _,
+    cycle: v,
+    label: computed(() => i[s.value]),
+    icon: computed(() => a[s.value]),
+  };
+}
+export { s as t };