Themes

/* Dark mode values are default */
:root {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
}

/* Light mode values override */
.light {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
}

<!-- Correct: Uses theme variables -->
<div class="bg-background text-foreground">Content that adapts to theme</div>

<!-- Incorrect: Hard-coded colors -->
<div class="bg-white text-black">Content that won't adapt</div>

// Check current theme (dark is default)
const isLight = document.documentElement.classList.contains('light');

// Toggle theme
document.documentElement.classList.toggle('light');

// Set specific theme
document.documentElement.classList.add('light'); // Light mode
document.documentElement.classList.remove('light'); // Dark mode (default)

// Check system preference
const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;

// Listen for system changes
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
  if (e.matches) {
    document.documentElement.classList.add('light');
  } else {
    document.documentElement.classList.remove('light');
  }
});