Add dark/light theme variants to screenshot pipeline

.github/workflows/pr-validation.yml

@@ -296,12 +296,12 @@ jobs:
 
             // Page status table
             const pages = ['home', 'screenshots', 'documentation', 'downloads', 'support'];
+            const getIcon = (name) => {
+              const img = report.images.find(i => i.name === name);
+              return !img ? '➖' : img.status === 'changed' ? '🔄' : '✅';
+            };
             const pageRows = pages.map(p => {
-              const desktopImg = report.images.find(i => i.name === `${p}-desktop.png`);
-              const mobileImg = report.images.find(i => i.name === `${p}-mobile.png`);
-              const desktopIcon = !desktopImg ? '➖' : desktopImg.status === 'changed' ? '🔄' : '✅';
-              const mobileIcon = !mobileImg ? '➖' : mobileImg.status === 'changed' ? '🔄' : '✅';
-              return `| ${p} | ${desktopIcon} | ${mobileIcon} |`;
+              return `| ${p} | ${getIcon(`${p}-dark-desktop.png`)} | ${getIcon(`${p}-dark-mobile.png`)} | ${getIcon(`${p}-light-desktop.png`)} | ${getIcon(`${p}-light-mobile.png`)} |`;
             }).join('\n');
 
             const mergeStatus = jobStatus === 'success' && e2eStatus === 'success'
@@ -318,8 +318,8 @@ jobs:
               ``,
               visualSection,
               `### 📸 Page Status`,
-              `| Page | 🖥️ Desktop | 📱 Mobile |`,
-              `|------|-----------|----------|`,
+              `| Page | 🌙 Dark Desktop | 🌙 Dark Mobile | ☀️ Light Desktop | ☀️ Light Mobile |`,
+              `|------|----------------|----------------|-----------------|-----------------|`,
               pageRows,
               ``,
               mergeStatus,

e2e/screenshots.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { expectScreenshot, printWarningSummary } from './visual';
+import { expectScreenshot, setTheme, printWarningSummary } from './visual';
 
 const pages = [
   { path: '/', name: 'home' },
@@ -10,26 +10,33 @@ const pages = [
 ];
 
 const MOBILE_VIEWPORT = { width: 375, height: 812 };
+const themes = ['dark', 'light'] as const;
 
 test.describe('desktop screenshots', () => {
-  for (const { path, name } of pages) {
-    test(`${name} page renders correctly`, async ({ page }) => {
-      await page.goto(path, { waitUntil: 'networkidle' });
-      await expect(page).toHaveTitle(/DiffractWD/);
-      await expectScreenshot(page, `${name}-desktop.png`);
-    });
+  for (const theme of themes) {
+    for (const { path, name } of pages) {
+      test(`${name} page renders correctly (${theme}, desktop)`, async ({ page }) => {
+        await page.goto(path, { waitUntil: 'networkidle' });
+        await setTheme(page, theme);
+        await expect(page).toHaveTitle(/DiffractWD/);
+        await expectScreenshot(page, `${name}-${theme}-desktop.png`);
+      });
+    }
   }
 });
 
 test.describe('mobile screenshots', () => {
   test.use({ viewport: MOBILE_VIEWPORT });
 
-  for (const { path, name } of pages) {
-    test(`${name} page renders correctly on mobile`, async ({ page }) => {
-      await page.goto(path, { waitUntil: 'networkidle' });
-      await expect(page).toHaveTitle(/DiffractWD/);
-      await expectScreenshot(page, `${name}-mobile.png`);
-    });
+  for (const theme of themes) {
+    for (const { path, name } of pages) {
+      test(`${name} page renders correctly (${theme}, mobile)`, async ({ page }) => {
+        await page.goto(path, { waitUntil: 'networkidle' });
+        await setTheme(page, theme);
+        await expect(page).toHaveTitle(/DiffractWD/);
+        await expectScreenshot(page, `${name}-${theme}-mobile.png`);
+      });
+    }
   }
 });
 

e2e/visual.ts

@@ -26,6 +26,19 @@ export function getVisualMode(): VisualMode {
   return 'warning';
 }
 
+export async function setTheme(page: Page, theme: 'dark' | 'light'): Promise<void> {
+  await page.evaluate((t) => {
+    localStorage.setItem('theme', t);
+    if (t === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, theme);
+  // Allow styles to settle after theme change
+  await page.waitForTimeout(300);
+}
+
 export async function waitForVisualStability(page: Page, timeout = 500): Promise<void> {
   await page.waitForLoadState('networkidle');
   await page.evaluate(() => document.fonts.ready);