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 <noreply@anthropic.com>
This commit is contained in:
@@ -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]');
|
||||
|
||||
Reference in New Issue
Block a user