import { onMounted, ref } from 'vue';

export const useDarkMode = () => {
  const isDarkMode = ref(false);

  onMounted(() => {
    const r = document.documentElement;
    isDarkMode.value =
      window
        .getComputedStyle(r)
        .getPropertyValue('--bms-color-scheme')
        .trim() === 'dark';
  });

  const toggleDarkMode = (isDark: boolean) => {
    const r = document.documentElement;
    r.style.setProperty('--bms-color-scheme', isDark ? 'dark' : 'light');
    isDarkMode.value = isDark;
  };

  return { isDarkMode, toggleDarkMode };
};
