cv-site/tests/mjs/19-dark-theme-test.mjs

#!/usr/bin/env bun
/**
 * DARK THEME COLOR TEST
 * Verify that all text colors use CSS variables and display correctly in dark theme
 */

import { chromium } from "playwright";

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

async function testDarkTheme() {
  console.log("🧪 DARK THEME COLOR TEST\n");
  console.log("=".repeat(70));

  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);

  // Test 1: Light theme (default)
  console.log("\n1️⃣  Testing Light Theme (default):\n");

  const lightColors = await page.evaluate(() => {
    const styles = window.getComputedStyle(document.documentElement);
    return {
      textPrimary: styles.getPropertyValue('--text-primary').trim(),
      textSecondary: styles.getPropertyValue('--text-secondary').trim(),
      textMuted: styles.getPropertyValue('--text-muted').trim(),
      textLight: styles.getPropertyValue('--text-light').trim(),
      paperBg: styles.getPropertyValue('--paper-bg').trim(),
    };
  });

  console.log(`   Light theme CSS variables:`);
  console.log(`     --text-primary: ${lightColors.textPrimary}`);
  console.log(`     --text-secondary: ${lightColors.textSecondary}`);
  console.log(`     --text-muted: ${lightColors.textMuted}`);
  console.log(`     --text-light: ${lightColors.textLight}`);
  console.log(`     --paper-bg: ${lightColors.paperBg}`);

  // Check actual element colors in light theme
  const lightElements = await page.evaluate(() => {
    const getName = document.querySelector('.cv-name');
    const sectionTitle = document.querySelector('.section-title');
    const summaryText = document.querySelector('.summary-text');
    const experiencePeriod = document.querySelector('.experience-period');
    const durationText = document.querySelector('.duration-text');

    return {
      name: getName ? window.getComputedStyle(getName).color : 'not found',
      sectionTitle: sectionTitle ? window.getComputedStyle(sectionTitle).color : 'not found',
      summaryText: summaryText ? window.getComputedStyle(summaryText).color : 'not found',
      experiencePeriod: experiencePeriod ? window.getComputedStyle(experiencePeriod).color : 'not found',
      durationText: durationText ? window.getComputedStyle(durationText).color : 'not found',
    };
  });

  console.log(`\n   Actual element colors:`);
  console.log(`     .cv-name: ${lightElements.name}`);
  console.log(`     .section-title: ${lightElements.sectionTitle}`);
  console.log(`     .summary-text: ${lightElements.summaryText}`);
  console.log(`     .experience-period: ${lightElements.experiencePeriod}`);
  console.log(`     .duration-text: ${lightElements.durationText}`);

  // Take screenshot of light theme
  await page.screenshot({ path: 'tests/screenshots/theme-light.png' });
  console.log(`\n   📸 Light theme screenshot: tests/screenshots/theme-light.png`);

  // Test 2: Switch to dark theme
  console.log("\n2️⃣  Testing Dark Theme:\n");

  // Click theme toggle twice (cycles: auto → light → dark)
  console.log(`   Switching to dark theme (click 1: auto→light)...`);
  await page.click('.color-theme-switcher');
  await page.waitForTimeout(500);

  console.log(`   Switching to dark theme (click 2: light→dark)...`);
  await page.click('.color-theme-switcher');
  await page.waitForTimeout(500);

  const darkColors = await page.evaluate(() => {
    const styles = window.getComputedStyle(document.documentElement);
    const htmlAttr = document.documentElement.getAttribute('data-color-theme');
    return {
      htmlAttr,
      textPrimary: styles.getPropertyValue('--text-primary').trim(),
      textSecondary: styles.getPropertyValue('--text-secondary').trim(),
      textMuted: styles.getPropertyValue('--text-muted').trim(),
      textLight: styles.getPropertyValue('--text-light').trim(),
      paperBg: styles.getPropertyValue('--paper-bg').trim(),
    };
  });

  console.log(`   Dark theme applied: data-color-theme="${darkColors.htmlAttr}"`);
  console.log(`   Dark theme CSS variables:`);
  console.log(`     --text-primary: ${darkColors.textPrimary}`);
  console.log(`     --text-secondary: ${darkColors.textSecondary}`);
  console.log(`     --text-muted: ${darkColors.textMuted}`);
  console.log(`     --text-light: ${darkColors.textLight}`);
  console.log(`     --paper-bg: ${darkColors.paperBg}`);

  // Check actual element colors in dark theme
  const darkElements = await page.evaluate(() => {
    const getName = document.querySelector('.cv-name');
    const sectionTitle = document.querySelector('.section-title');
    const summaryText = document.querySelector('.summary-text');
    const experiencePeriod = document.querySelector('.experience-period');
    const durationText = document.querySelector('.duration-text');

    return {
      name: getName ? window.getComputedStyle(getName).color : 'not found',
      sectionTitle: sectionTitle ? window.getComputedStyle(sectionTitle).color : 'not found',
      summaryText: summaryText ? window.getComputedStyle(summaryText).color : 'not found',
      experiencePeriod: experiencePeriod ? window.getComputedStyle(experiencePeriod).color : 'not found',
      durationText: durationText ? window.getComputedStyle(durationText).color : 'not found',
    };
  });

  console.log(`\n   Actual element colors in dark theme:`);
  console.log(`     .cv-name: ${darkElements.name}`);
  console.log(`     .section-title: ${darkElements.sectionTitle}`);
  console.log(`     .summary-text: ${darkElements.summaryText}`);
  console.log(`     .experience-period: ${darkElements.experiencePeriod}`);
  console.log(`     .duration-text: ${darkElements.durationText}`);

  // Verify colors are light (not dark) in dark theme
  const isLightText = darkElements.name.includes('224') || darkElements.name.includes('rgb(224');
  if (isLightText) {
    console.log(`\n   ✅ Text colors are light (visible on dark background)`);
  } else {
    console.log(`\n   ❌ Text colors might be too dark for dark background!`);
  }

  // Take screenshot of dark theme
  await page.screenshot({ path: 'tests/screenshots/theme-dark.png' });
  console.log(`\n   📸 Dark theme screenshot: tests/screenshots/theme-dark.png`);

  console.log("\n" + "=".repeat(70));
  console.log("\n✅ Test complete! Check screenshots:");
  console.log("   - tests/screenshots/theme-light.png");
  console.log("   - tests/screenshots/theme-dark.png");
  console.log("\nBrowser will stay open for 30 seconds...");
  await page.waitForTimeout(30000);
  await browser.close();
}

await testDarkTheme();