@scalar/api-client/dist/v2/hooks/use-color-mode.js

the open source API testing client

import { computed as n, toValue as l, ref as m, watch as f, onMounted as h, onUnmounted as g } from "vue";
const c = () => typeof window > "u" || typeof window?.matchMedia != "function" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", r = (o) => o === "system" ? c() : o, a = (o) => {
  if (typeof document > "u")
    return;
  const e = o === "dark";
  document.body.classList.toggle("dark-mode", e), document.body.classList.toggle("light-mode", !e);
}, y = ({ workspaceStore: o }) => {
  const e = n(() => l(o)?.workspace["x-scalar-color-mode"] ?? "system"), s = n(() => r(e.value)), i = n(() => s.value === "dark"), t = m(null), d = () => {
    e.value === "system" && a(c());
  };
  return f(e, (u) => a(r(u)), { immediate: !0 }), h(() => {
    typeof window < "u" && typeof window?.matchMedia == "function" && (t.value = window.matchMedia("(prefers-color-scheme: dark)"), t.value.addEventListener("change", d));
  }), g(() => {
    t.value?.removeEventListener("change", d);
  }), {
    /** The current color mode from the workspace store (reactive). */
    colorMode: e,
    /** Whether the current effective color mode is dark (reactive). */
    isDarkMode: i
  };
};
export {
  y as useColorMode
};