marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(nav): add ThemeToggle component with moon/sun icons and no-flash script

Browse Source 
- Inline <script> in app.html applies saved localStorage theme before first
  paint to prevent flash of wrong theme
- ThemeToggle.svelte: moon/sun button, localStorage persistence, sets
  data-theme on <html>, defaults to system preference on first visit
- Placed in +layout.svelte between language selector and user menu
- E2E tests cover visibility, toggle, reverse toggle, persistence, and
  no-flash behaviour — all 6 passing

Refs #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 11:57:09 +01:00
parent e83ba9b681
commit caba89dacc
4 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/e2e/theme.spec.ts Normal file
View File

@@ -0,0 +1,73 @@
import { test, expect } from '@playwright/test';
test.describe('Theme toggle', () => {
test.beforeEach(async ({ page }) => {
// Clear any saved theme preference before each test
await page.goto('/');
await page.evaluate(() => localStorage.removeItem('theme'));
});
test('toggle button is visible in the header', async ({ page }) => {
await page.goto('/');
await expect(
page.getByRole('banner').getByRole('button', { name: /dark mode|light mode/i })
).toBeVisible();
});
test('clicking the toggle switches to dark mode', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('[data-hydrated]');
const html = page.locator('html');
await expect(html).not.toHaveAttribute('data-theme', 'dark');
await page
.getByRole('banner')
.getByRole('button', { name: /dark mode/i })
.click();
await expect(html).toHaveAttribute('data-theme', 'dark');
});
test('clicking the toggle again switches back to light mode', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('[data-hydrated]');
await page
.getByRole('banner')
.getByRole('button', { name: /dark mode/i })
.click();
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
await page
.getByRole('banner')
.getByRole('button', { name: /light mode/i })
.click();
await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
});
test('theme persists after page reload', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('[data-hydrated]');
await page
.getByRole('banner')
.getByRole('button', { name: /dark mode/i })
.click();
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
await page.reload();
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
});
test('saved theme is applied before first paint (no flash)', async ({ page }) => {
// Set dark theme in localStorage before navigating
await page.goto('/');
await page.evaluate(() => localStorage.setItem('theme', 'dark'));
// Intercept the initial HTML to verify data-theme is set immediately
await page.goto('/');
const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
expect(theme).toBe('dark');
});
});