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

Vue hooks library

import { computed, watchEffect } from "vue";
import useLocalStorageState from "../useLocalStorageState";
import useMedia from "../useMedia";
function useDarkMode() {
  const [enabledState, setEnabledState] = useLocalStorageState("dark-mode-enabled");
  const prefersDarkMode = usePrefersDarkMode();
  const enabled = computed(() => {
    return typeof enabledState.value !== "undefined" ? enabledState.value : prefersDarkMode.value;
  });
  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(["(prefers-color-scheme: dark)"], [true], false);
}
export {
  useDarkMode as default
};