epic-designer/dist/hooks/src/common/theme.js

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

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