From 938a4b07bf6b764dc954e884b8fa319bac777951 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 31 Mar 2026 11:39:37 +0200 Subject: [PATCH] test(dark-mode): add failing test for --c-header token on header element Header should use bg-header (rgb(1,51,94) = #01335e) in dark mode instead of bg-surface. Currently fails because header still uses bg-surface. Co-Authored-By: Claude Sonnet 4.6 --- frontend/e2e/theme.spec.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/frontend/e2e/theme.spec.ts b/frontend/e2e/theme.spec.ts index 037b9fcf..168f4fcf 100644 --- a/frontend/e2e/theme.spec.ts +++ b/frontend/e2e/theme.spec.ts @@ -60,6 +60,20 @@ test.describe('Theme toggle', () => { await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); }); + test('header uses --c-header token background in dark mode', async ({ page }) => { + await page.goto('/'); + await page.waitForSelector('[data-hydrated]'); + + await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark')); + + const headerBg = await page.evaluate(() => { + const header = document.querySelector('header'); + return header ? getComputedStyle(header).backgroundColor : null; + }); + // --c-header in dark mode = #01335e → rgb(1, 51, 94) + expect(headerBg).toBe('rgb(1, 51, 94)'); + }); + test('color-scheme is dark when data-theme=dark is set', async ({ page }) => { await page.goto('/'); await page.waitForSelector('[data-hydrated]');