cv-site/tests/mjs/20-dark-theme-debug.mjs

#!/usr/bin/env bun
/**
 * DEBUG: Find which element has white background in dark theme
 */

import { chromium } from "playwright";

const URL = "http://localhost:1999";

async function debugDarkTheme() {
  console.log("🔍 DARK THEME BACKGROUND DEBUG\n");

  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
  await page.goto(URL);
  await page.waitForTimeout(2000);

  // Switch to dark theme (click twice: auto→light→dark)
  console.log("Switching to dark theme...");
  await page.click('.color-theme-switcher');
  await page.waitForTimeout(300);
  await page.click('.color-theme-switcher');
  await page.waitForTimeout(500);

  const backgrounds = await page.evaluate(() => {
    const elements = {
      html: document.documentElement,
      body: document.body,
      cvPage: document.querySelector('.cv-page'),
      pageContent: document.querySelector('.page-content'),
      cvMain: document.querySelector('.cv-main'),
      cvPaper: document.querySelector('.cv-paper'),
      cvContainer: document.querySelector('.cv-container'),
    };

    const results = {};
    for (const [name, el] of Object.entries(elements)) {
      if (el) {
        const styles = window.getComputedStyle(el);
        results[name] = {
          background: styles.background,
          backgroundColor: styles.backgroundColor,
          className: el.className,
        };
      } else {
        results[name] = { error: 'Element not found' };
      }
    }
    return results;
  });

  console.log("\nElement backgrounds in DARK theme:\n");
  for (const [name, info] of Object.entries(backgrounds)) {
    console.log(`${name}:`);
    if (info.error) {
      console.log(`  ❌ ${info.error}`);
    } else {
      console.log(`  Class: ${info.className || '(none)'}`);
      console.log(`  background: ${info.background}`);
      console.log(`  backgroundColor: ${info.backgroundColor}`);
    }
    console.log();
  }

  console.log("\nBrowser will stay open for inspection...");
  await page.waitForTimeout(60000);
  await browser.close();
}

await debugDarkTheme();