JS snippet

// Read current preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
console.log('Dark mode:', prefersDark.matches);

// Listen for changes
prefersDark.addEventListener('change', (e) => {
  if (e.matches) {
    applyTheme('dark');
  } else {
    applyTheme('light');
  }
});

function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  // Optional: auto-apply if user has not overridden
  if (!localStorage.getItem('user-theme')) {
    document.documentElement.setAttribute('data-theme', theme);
  }
}