import { computed, ref } from 'vue'

const key = 'vdi.theme'
const saved = (() => { try { return localStorage.getItem(key) } catch { return null } })()
const theme = ref<'dark' | 'light'>(saved === 'light' ? 'light' : 'dark')
function apply() {
  document.documentElement.dataset.theme = theme.value
  document.documentElement.style.colorScheme = theme.value
}
apply()
export function useTheme() {
  const dark = computed(() => theme.value === 'dark')
  function toggle() {
    theme.value = dark.value ? 'light' : 'dark'
    apply()
    try { localStorage.setItem(key, theme.value) } catch { /* The theme still works without browser storage. */ }
  }
  return { theme, dark, toggle }
}