Add E2E tests for authenticated navigation and theme toggle

- **Authenticated Navigation:** Test header, footer, settings navigation, user menu interactions, and settings tabs for authenticated users. Validate logout and active tab highlighting.
- **Theme Toggle:** Add tests for theme persistence and switching on both public and private pages. Verify localStorage integration and DOM updates across scenarios.

frontend/e2e/theme-toggle.spec.ts

@@ -0,0 +1,83 @@
+/**
+ * E2E Tests for Theme Toggle
+ * Tests theme switching on public pages (login/register)
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Theme Toggle on Public Pages', () => {
+  test.beforeEach(async ({ page }) => {
+    // Clear localStorage before each test
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.clear());
+  });
+
+  test('theme is applied on login page', async ({ page }) => {
+    await page.goto('/login');
+
+    // Wait for page to load and theme to be applied
+    await page.waitForTimeout(500);
+
+    // Check that a theme class is applied
+    const htmlElement = page.locator('html');
+    const className = await htmlElement.getAttribute('class');
+
+    // Should have either 'light' or 'dark' class
+    expect(className).toMatch(/light|dark/);
+  });
+
+  test('theme persists across page navigation', async ({ page }) => {
+    await page.goto('/login');
+    await page.waitForTimeout(500);
+
+    // Set theme to dark via localStorage
+    await page.evaluate(() => {
+      localStorage.setItem('theme', 'dark');
+    });
+
+    // Reload to apply theme
+    await page.reload();
+    await page.waitForTimeout(500);
+
+    // Verify dark theme is applied
+    await expect(page.locator('html')).toHaveClass(/dark/);
+
+    // Navigate to register page
+    await page.goto('/register');
+    await page.waitForTimeout(500);
+
+    // Theme should still be dark
+    await expect(page.locator('html')).toHaveClass(/dark/);
+
+    // Navigate to password reset
+    await page.goto('/password-reset');
+    await page.waitForTimeout(500);
+
+    // Theme should still be dark
+    await expect(page.locator('html')).toHaveClass(/dark/);
+  });
+
+  test('can switch theme programmatically', async ({ page }) => {
+    await page.goto('/login');
+
+    // Set to light theme
+    await page.evaluate(() => {
+      localStorage.setItem('theme', 'light');
+    });
+    await page.reload();
+    await page.waitForTimeout(500);
+
+    await expect(page.locator('html')).toHaveClass(/light/);
+    await expect(page.locator('html')).not.toHaveClass(/dark/);
+
+    // Switch to dark theme
+    await page.evaluate(() => {
+      localStorage.setItem('theme', 'dark');
+    });
+    await page.reload();
+    await page.waitForTimeout(500);
+
+    await expect(page.locator('html')).toHaveClass(/dark/);
+    await expect(page.locator('html')).not.toHaveClass(/light/);
+  });
+});