Dark Mode CSS Generator

/* CSS Custom Properties for theming */
:root {
  --bg-primary: #ffffff;
  --text-primary: #1f2937;
  --color-primary: #6366f1;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1f2937;
    --text-primary: #f9fafb;
  }
}

/* Manual dark mode class */
.dark {
  --bg-primary: #1f2937;
    --text-primary: #f9fafb;
}

/* Base styles using variables */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 300ms ease, color 300ms ease;
}

/* Example component */
.card {
  background-color: var(--bg-primary);
  border: 1px solid var(--text-primary);
  opacity: 0.1;
}

/* Links */
a {
  color: var(--color-primary);
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease;
}

// JavaScript for manual dark mode toggle
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  
  // Save preference
  const isDark = document.documentElement.classList.contains('dark');
  localStorage.setItem('darkMode', isDark);
}

// Check saved preference
const savedDarkMode = localStorage.getItem('darkMode');
if (savedDarkMode === 'true') {
  document.documentElement.classList.add('dark');
}

// Check system preference
if (!savedDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}