McPringle/fitpub
1
0
Fork 0
Code Issues 24 Pull requests 6 Projects Releases Packages Wiki Activity Actions

Fix dark mode contrast issues on notifications page

Browse source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Tim Zöller 2026-01-03 21:03:58 +01:00
parent bc63e0f16d
commit 5455f8cd36
1 changed files with 62 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/main/resources/templates/notifications.html
View file

@ -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;
}
}
</style>
</head>
<body>