From f32d7d34c8b33d8a1e5136163775260cc14b8f37 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sat, 29 Nov 2025 18:02:30 -0500
Subject: [PATCH] Add dark mode support to family tree generation page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../templates/family_tree_generation.html     | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/kjvstudy_org/templates/family_tree_generation.html b/kjvstudy_org/templates/family_tree_generation.html
index 41bf01f..6b48bd5 100644
--- a/kjvstudy_org/templates/family_tree_generation.html
+++ b/kjvstudy_org/templates/family_tree_generation.html
@@ -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 %}