feat(ui): implement 'Twilight Velvet' dark theme and fix visibility issues

- Add 'Twilight Velvet' color palette to globals.css with OKLCH values
- Update SettingsPage headers, cards, and dialogs to use semantic theme variables
- Update HistoryCard, HistoryFeed, and DraftContent to support dark mode
- Update ProviderSelector and ProviderList to use custom card background (#2A2A3D)
- Add ThemeToggle component with improved visibility
- Ensure consistent use of 'bg-card', 'text-foreground', and 'text-muted-foreground'

tests/support/factories/settings.factory.ts

@@ -0,0 +1,20 @@
+import { faker } from '@faker-js/faker';
+
+export interface UserSettings {
+    theme: 'light' | 'dark' | 'system';
+    fontSize: number;
+    reduceMotion: boolean;
+    language: string;
+    notificationsEnabled: boolean;
+}
+
+export const createSettings = (overrides: Partial<UserSettings> = {}): UserSettings => {
+    return {
+        theme: faker.helpers.arrayElement(['light', 'dark', 'system']),
+        fontSize: faker.number.int({ min: 12, max: 24 }),
+        reduceMotion: faker.datatype.boolean(),
+        language: 'en-US',
+        notificationsEnabled: faker.datatype.boolean(),
+        ...overrides,
+    };
+};

tests/support/fixtures/index.ts

@@ -1,8 +1,12 @@
-import { test as base } from '@playwright/test';
-import { UserFactory } from './factories/user-factory';
+import { test as base, BrowserContext } from '@playwright/test';
+import { UserFactory } from '../factories/user.factory';
 
 type TestFixtures = {
     userFactory: UserFactory;
+    offlineControl: {
+        goOffline: (context: BrowserContext) => Promise<void>;
+        goOnline: (context: BrowserContext) => Promise<void>;
+    };
 };
 
 export const test = base.extend<TestFixtures>({
@@ -11,6 +15,24 @@ export const test = base.extend<TestFixtures>({
         await use(factory);
         await factory.cleanup();
     },
+    offlineControl: async ({ }, use) => {
+        const offlineFixture = {
+            goOffline: async (context: BrowserContext) => {
+                await context.setOffline(true);
+                for (const page of context.pages()) {
+                    // Dispatch event to simulate navigator.onLine behavior changes in app
+                    await page.evaluate(() => window.dispatchEvent(new Event('offline'))).catch(() => { });
+                }
+            },
+            goOnline: async (context: BrowserContext) => {
+                await context.setOffline(false);
+                for (const page of context.pages()) {
+                    await page.evaluate(() => window.dispatchEvent(new Event('online'))).catch(() => { });
+                }
+            },
+        };
+        await use(offlineFixture);
+    },
 });
 
 export { expect } from '@playwright/test';