PM7-UI Dark Mode

/* PM7-UI Dark Mode Colors */
.dark, [data-theme="dark"] {
  /* Core Colors */
  --pm7-background: #121212;
  --pm7-foreground: #e0e0e0;
  --pm7-surface: #1e1e1e;
  --pm7-surface-hover: #2a2a2a;
  --pm7-surface-active: #333;

  /* Primary Colors */
  --pm7-primary: #3b9eff;
  --pm7-primary-hover: #2a8fe5;
  --pm7-primary-active: #1976D2;
  --pm7-primary-foreground: #ffffff;

  /* Text Colors */
  --pm7-text-primary: #e0e0e0;
  --pm7-text-secondary: #999999;
  --pm7-text-disabled: #666666;

  /* Borders */
  --pm7-border: #444;
  --pm7-border-hover: #666666;

  /* Muted */
  --pm7-muted: #2d2d2d;
  --pm7-muted-foreground: #e6e6e6;

  /* Status Colors */
  --pm7-success: #22c55e;
  --pm7-warning: #f59e0b;
  --pm7-error: #ef4444;
  --pm7-info: #3b82f6;
}

// Dark Mode Toggle Implementation
function toggleDarkMode() {
  const html = document.documentElement;
  const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  if (newTheme === 'dark') {
    html.classList.add('dark');
  } else {
    html.classList.remove('dark');
  }

  // Save preference
  localStorage.setItem('theme', newTheme);
}

// Apply saved theme on load
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme') || 'light';
  if (savedTheme === 'dark') {
    document.documentElement.classList.add('dark');
  }
});