feat(regression-test): render each theme on its own page-surface color

balzss · claude · balzss · commit a1e26e3a9407 · 2026-07-27T12:08:41.000+02:00
Paint the page background from the active theme's background.page semantic token so every theme is screenshotted on the surface it's actually used on. Most visibly, the dark theme now renders on its near-black surface instead of white. Canvas stays white; light shifts to its faint-grey page surface. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
diff --git a/regression-test/README.md b/regression-test/README.md
@@ -6,7 +6,7 @@ A small Next.js app that imports `@instructure/ui` locally and exposes one page
 - **Detect a11y issues** — axe-core runs against every page.
 - **Detect unexpected console errors** — the spec's `afterEach` hook asserts `console.error` was not called.
 
-Each page is captured once **per theme** (`canvas`, `light`, `dark`), so screenshots are named `<slug>-<theme>.png`. The theme is selected with the `?theme=<key>` query param, which `src/app/layout.tsx` reads and applies via `InstUISettingsProvider`. Add or remove themes with the `THEMES` array in `cypress/e2e/spec.cy.ts` (this multiplies the screenshot/baseline count).
+Each page is captured once **per theme** (`canvas`, `light`, `dark`), so screenshots are named `<slug>-<theme>.png`. The theme is selected with the `?theme=<key>` query param, which `src/app/layout.tsx` reads and applies via `InstUISettingsProvider`. The page background is painted from the active theme's own `background.page` semantic token, so each theme is captured on the surface it's actually used on — most visibly, the dark theme renders on its near-black surface rather than on white. Add or remove themes with the `THEMES` array in `cypress/e2e/spec.cy.ts` (this multiplies the screenshot/baseline count).
 
 See the [visual regression testing guide](../docs/contributing/testing/visual-regression.md) for the full CI pipeline, the diff report UI, and tuning notes.
 
diff --git a/regression-test/src/app/layout.tsx b/regression-test/src/app/layout.tsx
@@ -73,10 +73,24 @@ export default function RootLayout({
     }
   }, [])
 
+  // Paint the page on the active theme's own page-surface color so each theme is
+  // screenshotted the way it's actually used — most visibly, the dark theme
+  // renders on its near-black surface rather than on white. The value comes from
+  // the theme's semantic tokens (canvas → white, light → faint grey, dark →
+  // near-black), so it stays correct if those tokens change and needs no
+  // per-theme hardcoding. Fall back to `transparent` if the token is ever absent.
+  const pageBackground =
+    (themes[themeKey] as any)?.newTheme?.semantics?.color?.background?.page ??
+    'transparent'
+
   return (
     // we need to make a new Map to reset counting on the server side
     // on each page refresh TODO fix
-    <html lang="en" data-theme={themeKey}>
+    <html
+      lang="en"
+      data-theme={themeKey}
+      style={{ background: pageBackground }}
+    >
       <head>
         <title>Component visual and regression test suite</title>
       </head>
