@vue-material/core/dist/ref/use-preferred-theme.js

Yet another 'Material Design Components' library for Vue3.

import { ref, onMounted, onUnmounted } from "vue";
function usePreferredTheme() {
  const theme = ref("light");
  let mediaQuery;
  function updateTheme() {
    theme.value = this.matches ? "dark" : "light";
  }
  onMounted(() => {
    mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    updateTheme.call(mediaQuery);
    mediaQuery.addEventListener("change", updateTheme);
  });
  onUnmounted(() => mediaQuery.removeEventListener("change", updateTheme));
  return theme;
}
export {
  usePreferredTheme
};