kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode support to family tree person page

Browse Source 
- Dark backgrounds for main card, section cards, family cards, verse cards
- Dark styling for navigation, vitals, biography, and bottom nav
- Proper contrast for all text elements and links
- 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:
Kenneth Reitz
2025-11-29 18:02:07 -05:00
parent a7faccb90d
commit ba9dea1984
1 changed files with 128 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/templates/family_tree_person.html
+128
View File
@@ -284,6 +284,134 @@
.bottom-nav a.primary:hover {
background: #3d6a4b;
}
/* Dark mode */
[data-theme="dark"] .person-nav {
border-bottom-color: #333;
}
[data-theme="dark"] .person-nav a {
color: #aaa;
}
[data-theme="dark"] .person-nav a:hover {
color: #fff;
}
[data-theme="dark"] .person-main-card {
background: #1a1a1a;
border-color: #333;
}
[data-theme="dark"] .person-main-card.kekule {
background: linear-gradient(to right, #2a2a1a, #1a1a1a);
}
[data-theme="dark"] .person-name {
color: #e0e0e0;
}
[data-theme="dark"] .person-subtitle {
color: #888;
}
[data-theme="dark"] .vital-label {
color: #888;
}
[data-theme="dark"] .vital-value {
color: #e0e0e0;
}
[data-theme="dark"] .section-card {
background: #1a1a1a;
border-color: #333;
}
[data-theme="dark"] .section-card h2 {
color: #e0e0e0;
border-bottom-color: #333;
}
[data-theme="dark"] .family-card {
background: #252525;
border-color: #333;
}
[data-theme="dark"] .family-card:hover {
background: #2a2a2a;
}
[data-theme="dark"] .family-card.kekule {
background: linear-gradient(to right, #2a2a1a, #252525);
}
[data-theme="dark"] .family-card-name {
color: #e0e0e0;
}
[data-theme="dark"] .family-card-meta {
color: #888;
}
[data-theme="dark"] .verse-card {
background: #252525;
border-color: #333;
}
[data-theme="dark"] .verse-card-ref {
color: #e0e0e0;
}
[data-theme="dark"] .verse-card-text {
color: #bbb;
}
[data-theme="dark"] .biography-text {
color: #ccc;
}
[data-theme="dark"] .biography-significance {
color: #888;
border-top-color: #333;
}
[data-theme="dark"] .event-item {
border-bottom-color: #333;
}
[data-theme="dark"] .event-desc {
color: #ccc;
}
[data-theme="dark"] .event-verse a {
color: #888;
}
[data-theme="dark"] .bottom-nav {
border-top-color: #333;
}
[data-theme="dark"] .bottom-nav a {
background: #252525;
border-color: #444;
color: #ccc;
}
[data-theme="dark"] .bottom-nav a:hover {
background: #2a2a2a;
border-color: #555;
}
[data-theme="dark"] .bottom-nav a.primary {
background: #4a7c59;
border-color: #4a7c59;
color: #fff;
}
[data-theme="dark"] .bottom-nav a.primary:hover {
background: #3d6a4b;
}
</style>
{% endblock %}