From 5455f8cd36e9704dc2276aee8ad326537fa33547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Z=C3=B6ller?= Date: Sat, 3 Jan 2026 21:03:58 +0100 Subject: [PATCH] Fix dark mode contrast issues on notifications page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Active tab (ALL/UNREAD): Light text on dark background instead of white-on-white - Unread notifications: Cyan-tinted semi-transparent background for visibility - Actor names: Light color (#e8e8f0) for proper contrast in dark mode - Hover states: Dark purple background (#301550) instead of white - Notification icons: Semi-transparent backgrounds with bright neon colors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- .../resources/templates/notifications.html | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/src/main/resources/templates/notifications.html b/src/main/resources/templates/notifications.html index 29c62cd..e567eb5 100644 --- a/src/main/resources/templates/notifications.html +++ b/src/main/resources/templates/notifications.html @@ -85,6 +85,68 @@ border-bottom: 1px solid #dee2e6; margin-bottom: 1rem; } + + /* Dark mode overrides */ + @media (prefers-color-scheme: dark) { + .notification-item { + border-bottom-color: #3d2060; + } + + .notification-item:hover { + background-color: #301550; + } + + .notification-item.unread { + background-color: rgba(0, 255, 255, 0.15); + } + + .notification-item.unread:hover { + background-color: rgba(0, 255, 255, 0.25); + } + + .notification-actor { + color: #e8e8f0; + } + + .notification-time { + color: #a8a8c0; + } + + .notification-icon.like { + background-color: rgba(220, 53, 69, 0.25); + color: #ff6b7a; + } + + .notification-icon.comment { + background-color: rgba(0, 212, 255, 0.25); + color: #00d4ff; + } + + .notification-icon.follow { + background-color: rgba(57, 255, 20, 0.25); + color: #39ff14; + } + + .filter-tabs { + border-bottom-color: #3d2060; + } + + /* Fix active tab text contrast */ + .nav-tabs .nav-link.active { + background-color: #301550; + border-color: #3d2060 #3d2060 #301550; + color: #e8e8f0; + } + + .nav-tabs .nav-link { + color: #a8a8c0; + } + + .nav-tabs .nav-link:hover { + color: #00ffff; + border-color: #3d2060 #3d2060 transparent; + } + }