From b8b0fba3d47364e520853cbe03fe63203a093eb1 Mon Sep 17 00:00:00 2001
From: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
Date: Tue, 1 Sep 2026 14:14:38 +0800
Subject: [PATCH] fix(theme): polish dark notification states

Signed-off-by: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
---
 web/e2e/theme-toggle.spec.ts                           | 10 ++++++++++
 web/src/features/notification/notification-bell.tsx    |  2 +-
 .../features/notification/notification-dropdown.tsx    |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/e2e/theme-toggle.spec.ts b/web/e2e/theme-toggle.spec.ts
index 4f4cfff7..5206e720 100644
--- a/web/e2e/theme-toggle.spec.ts
+++ b/web/e2e/theme-toggle.spec.ts
@@ -34,6 +34,16 @@ test.describe('Light and dark theme', () => {
     await expect(page.getByRole('heading', { name: 'SkillHub', exact: true })).toBeVisible()
     await page.screenshot({ path: testInfo.outputPath('dark-desktop.png'), fullPage: true })
 
+    const notificationButton = page.getByRole('button', { name: 'Notifications' })
+    await notificationButton.click()
+    await expect(page.getByText('Notifications', { exact: true })).toBeVisible()
+    const firstNotification = notificationButton.locator('..').locator('a').first()
+    if (await firstNotification.count()) {
+      await firstNotification.hover()
+    }
+    await page.screenshot({ path: testInfo.outputPath('dark-notifications.png'), fullPage: true })
+    await notificationButton.click()
+
     await page.setViewportSize({ width: 390, height: 844 })
     await expect(page.getByRole('button', { name: 'Switch to light theme' })).toBeVisible()
     await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true)
diff --git a/web/src/features/notification/notification-bell.tsx b/web/src/features/notification/notification-bell.tsx
index 1a22a06b..1299d0f0 100644
--- a/web/src/features/notification/notification-bell.tsx
+++ b/web/src/features/notification/notification-bell.tsx
@@ -45,7 +45,7 @@ export function NotificationBell() {
         type="button"
         aria-label={t('notification.title')}
         onClick={() => setOpen((v) => !v)}
-        className="relative flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 transition-colors"
+        className="relative flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-muted"
       >
         {/* Bell SVG */}
         <svg
diff --git a/web/src/features/notification/notification-dropdown.tsx b/web/src/features/notification/notification-dropdown.tsx
index f5c4a04d..aaf0780d 100644
--- a/web/src/features/notification/notification-dropdown.tsx
+++ b/web/src/features/notification/notification-dropdown.tsx
@@ -75,7 +75,7 @@ export function NotificationDropdown({ onClose }: Props) {
               <Link
                 to={resolveNotificationTarget(item)}
                 onClick={() => handleItemClick(item)}
-                className="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
+                className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted"
               >
                 {/* Unread dot */}
                 <span className={`mt-1.5 flex-shrink-0 w-2 h-2 rounded-full ${item.status === 'UNREAD' ? 'bg-red-500' : 'bg-transparent'}`} />