gepic/dist/hooks/common/theme.js

基于vue3的设计器,可视化开发页面表单

import { useToggle as a } from "@vueuse/core";
import { useStore as u } from "../store/index.js";
import { ref as c, onMounted as i, watch as l, onUnmounted as m } from "vue";
function k() {
  const { isDark: e } = u(), t = a(e);
  return {
    isDark: e,
    toggleDark: t
  };
}
function p() {
  const e = c(!1);
  return i(() => {
    d(e), f(e);
  }), l(
    () => e.value,
    () => {
      e.value ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark");
    }
  ), {
    isDark: e
  };
}
function d(e) {
  const t = document.documentElement;
  t && (t.classList.contains("dark") ? e.value = !0 : e.value = !1);
}
function f(e) {
  const t = document.querySelector("html"), n = new MutationObserver(function(r) {
    for (const o of r)
      if (o.type === "attributes" && o.attributeName === "class") {
        const s = o.target;
        new Array(...s.classList).includes("dark") ? e.value = !0 : e.value = !1;
      }
  });
  n.observe(t, {
    attributes: !0,
    attributeFilter: ["class"]
  }), m(() => {
    n.disconnect();
  });
}
export {
  d as getDarkState,
  p as useDark,
  k as useTheme
};