49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
// 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));
|