Add dark mode support to family tree generation page

- Dark backgrounds for stats bar and person cards
- Dark styling for navigation links
- Proper contrast for dates, family links, and verse references
- Kekulé ancestor gradient preserved in dark mode

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-29 18:02:30 -05:00
parent ba9dea1984
commit f32d7d34c8
@@ -177,6 +177,73 @@
font-size: 0.85rem;
color: #4a7c59;
}
/* Dark mode */
[data-theme="dark"] .gen-nav {
border-bottom-color: #333;
}
[data-theme="dark"] .gen-nav a {
color: #aaa;
}
[data-theme="dark"] .gen-nav a:hover {
color: #fff;
}
[data-theme="dark"] .gen-stats {
background: #252525;
}
[data-theme="dark"] .gen-stat-label {
color: #888;
}
[data-theme="dark"] .gen-stat-value {
color: #e0e0e0;
}
[data-theme="dark"] .person-card {
background: #1a1a1a;
border-color: #333;
}
[data-theme="dark"] .person-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .person-card.kekule {
background: linear-gradient(to right, #2a2a1a, #1a1a1a);
}
[data-theme="dark"] .person-card-name {
color: #e0e0e0;
}
[data-theme="dark"] .person-card-dates {
color: #888;
}
[data-theme="dark"] .person-card-family {
border-top-color: #333;
}
[data-theme="dark"] .family-label {
color: #888;
}
[data-theme="dark"] .family-links a {
color: #bbb;
}
[data-theme="dark"] .person-card-verse {
border-top-color: #333;
color: #888;
}
[data-theme="dark"] .person-card-verse a {
color: #6b9b7a;
}
</style>
{% endblock %}