import { ref, watch } from 'vue'

export const theme = ref(localStorage.getItem('theme') || 'light')

function apply(t) {
  document.documentElement.classList.toggle('dark', t === 'dark')
}

apply(theme.value)

watch(theme, (t) => {
  localStorage.setItem('theme', t)
  apply(t)
})

export function toggleTheme() {
  theme.value = theme.value === 'dark' ? 'light' : 'dark'
}