import { ref } from 'vue';


const theme = ref(localStorage.getItem('theme') || 'auto');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');


export function applyTheme() {
  const resolved = theme.value === 'auto' ? (prefersDark.matches ? 'dark' : 'light') : theme.value;
  document.documentElement.setAttribute('data-theme', resolved);
}

export function setTheme(value) {
  theme.value = value;
  localStorage.setItem('theme', value);
  applyTheme();
}

prefersDark.addEventListener('change', () => {
  if (theme.value === 'auto') applyTheme();
});