HomeDark Mode
Preview
js
Code
js
// 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);
  }
}
Related Blocks
js
Tailwind Dark Mode
Class-based dark mode setup for Tailwind.
js
Toggle Implementation
Persistent dark/light switch with localStorage.
css
CSS Variables Dark Mode
Automatic color switching with prefers-color-scheme.