// Dark Mode Toggle Example
// Attempts to enable dark mode on the page

console.log('🌙 Attempting to enable dark mode...');

// Try common dark mode implementations
await page.evaluate(() => {
  // Method 1: Toggle dark class on html
  if (document.documentElement.classList.contains('light')) {
    document.documentElement.classList.remove('light');
    document.documentElement.classList.add('dark');
  } else if (!document.documentElement.classList.contains('dark')) {
    document.documentElement.classList.add('dark');
  }

  // Method 2: Toggle dark class on body
  if (document.body.classList.contains('light')) {
    document.body.classList.remove('light');
    document.body.classList.add('dark');
  } else if (!document.body.classList.contains('dark')) {
    document.body.classList.add('dark');
  }

  // Method 3: Set data-theme attribute
  document.documentElement.setAttribute('data-theme', 'dark');

  // Method 4: Try to click dark mode toggle button
  const darkModeSelectors = [
    '[aria-label*="dark" i]',
    '[title*="dark" i]',
    'button[class*="dark" i]',
    'button[class*="theme" i]',
    '[data-theme-toggle]'
  ];

  for (const selector of darkModeSelectors) {
    const element = document.querySelector(selector);
    if (element && !element.classList.contains('active')) {
      element.click();
      break;
    }
  }
});

console.log('✓ Dark mode enabled');

// Wait for transitions
await new Promise(resolve => setTimeout(resolve, 500));