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

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

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