vue-hooks-plus/lib/useDarkMode/index.js

Vue hooks library

"use strict";
const vue = require("vue");
const useLocalStorageState = require("../useLocalStorageState");
const useMedia = require("../useMedia");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const useLocalStorageState__default = /* @__PURE__ */ _interopDefaultLegacy(useLocalStorageState);
const useMedia__default = /* @__PURE__ */ _interopDefaultLegacy(useMedia);
function useDarkMode() {
  const [enabledState, setEnabledState] = useLocalStorageState__default.default("dark-mode-enabled");
  const prefersDarkMode = usePrefersDarkMode();
  const enabled = vue.computed(() => {
    return typeof enabledState.value !== "undefined" ? enabledState.value : prefersDarkMode.value;
  });
  vue.watchEffect(() => {
    const className = "[vue-hooks-plus]-dark-mode";
    const element = window.document.body;
    if (enabled.value) {
      element.classList.add(className);
    } else {
      element.classList.remove(className);
    }
  });
  return [enabled, setEnabledState];
}
function usePrefersDarkMode() {
  return useMedia__default.default(["(prefers-color-scheme: dark)"], [true], false);
}
module.exports = useDarkMode;