Enhance theming support by updating color variables and ensuring consistent styling across sidenotes and marginnotes

kjvstudy_org/templates/base.html

@@ -53,6 +53,7 @@
     <style>
         /* Color scheme variables */
         :root {
+            color-scheme: light;
             --bg-color: #fffff8;
             --text-color: #111;
             --text-secondary: #666;
@@ -64,9 +65,11 @@
             --link-color: #333;
             --link-hover: #000;
             --code-bg: #f5f5f5;
+            --text-strong: #111;
         }
 
         [data-theme="dark"] {
+            color-scheme: dark;
             --bg-color: #1a1a1a;
             --text-color: #e0e0e0;
             --text-secondary: #b0b0b0;
@@ -78,6 +81,7 @@
             --link-color: #d0d0d0;
             --link-hover: #fff;
             --code-bg: #2a2a2a;
+            --text-strong: #e0e0e0;
         }
 
         /* Red letter toggle - hide red letters when disabled */
@@ -95,8 +99,29 @@
             max-height: none !important;
         }
 
+        /* Ensure sidenotes respect explicit theme (override OS dark prefs from tufte.css) */
+        .sidenote,
+        .marginnote {
+            background-color: transparent !important;
+            color: var(--text-color) !important;
+        }
+
+        [data-theme="dark"] .sidenote,
+        [data-theme="dark"] .marginnote {
+            background-color: var(--bg-color) !important;
+            color: var(--text-color) !important;
+        }
+
         /* Verse tooltip styles */
         /* Links to verses get normal pointer cursor (tooltips shown on hover) */
+        a {
+            color: var(--link-color) !important;
+        }
+
+        a:hover {
+            color: var(--link-hover) !important;
+        }
+
         a[href*="/book/"][href*="/chapter/"][href*="/verse/"]:not(.verse-number-link),
         a[href*="/book/"][href*="/chapter/"][href*="#verse-"]:not(.verse-number-link) {
             cursor: pointer;
@@ -175,8 +200,8 @@
         /* Enhanced typography and spacing */
         body {
             counter-reset: sidenote-counter;
-            background-color: var(--bg-color);
-            color: var(--text-color);
+            background-color: var(--bg-color) !important;
+            color: var(--text-color) !important;
             transition: background-color 0.3s ease, color 0.3s ease;
         }
 
@@ -187,6 +212,7 @@
         h1, h2, h3 {
             font-weight: 400;
             font-style: normal;
+            color: var(--text-color) !important;
         }
 
         h1 {

kjvstudy_org/templates/chapter.html

@@ -20,14 +20,14 @@
 .words-of-christ .marginnote,
 .words-of-christ .sidenote-number,
 .words-of-christ label.sidenote-number {
-    color: #111;
+    color: var(--text-color);
 }
 
 [data-theme="dark"] .words-of-christ .sidenote,
 [data-theme="dark"] .words-of-christ .marginnote,
 [data-theme="dark"] .words-of-christ .sidenote-number,
 [data-theme="dark"] .words-of-christ label.sidenote-number {
-    color: #ddd;
+    color: var(--text-color);
 }
 
 .sidenote,
@@ -68,7 +68,7 @@
     left: 0;
     right: 0;
     height: 60px;
-    background: linear-gradient(to bottom, transparent, #fffff8);
+    background: linear-gradient(to bottom, transparent, var(--bg-color));
     pointer-events: none;
 }
 
@@ -95,7 +95,7 @@ hr::before {
     content: "⁂";
     font-size: 1.5rem;
     letter-spacing: 0.6em;
-    color: #111;
+    color: var(--text-color);
 }
 
 .verse-number-link {

kjvstudy_org/templates/chapter_interlinear.html

@@ -19,7 +19,7 @@
 }
 
 .page-header .subtitle {
-    color: #666;
+    color: var(--text-secondary);
     margin: 0;
     display: flex;
     align-items: center;
@@ -51,11 +51,11 @@
     max-width: 55%;
     margin: 0 0 2rem 0;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--text-secondary);
 }
 
 .breadcrumb a {
-    color: #4a7c59;
+    color: var(--link-color);
     text-decoration: none;
 }
 
@@ -65,7 +65,7 @@
 
 .breadcrumb-separator {
     margin: 0 0.5rem;
-    color: #999;
+    color: var(--text-tertiary);
 }
 
 /* Chapter navigation */
@@ -76,11 +76,11 @@
     align-items: center;
     margin-bottom: 2rem;
     padding: 0.75rem 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .chapter-nav a {
-    color: #4a7c59;
+    color: var(--link-color);
     text-decoration: none;
     font-size: 0.95rem;
 }
@@ -93,7 +93,7 @@
 .verse-section {
     margin-bottom: 3rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .verse-section:last-child {
@@ -117,7 +117,7 @@
 .verse-text {
     font-size: 1.6rem;
     line-height: 2;
-    color: #333;
+    color: var(--text-strong);
     font-style: italic;
     flex: 1;
 }
@@ -125,7 +125,7 @@
 .verse-text a {
     color: inherit;
     text-decoration: none;
-    border-bottom: 1px dotted #999;
+    border-bottom: 1px dotted var(--text-tertiary);
 }
 
 .verse-text a:hover {
@@ -151,12 +151,12 @@
     border-radius: 4px;
     transition: all 0.2s ease;
     min-width: auto;
-    border: 1px solid transparent;
+    border: 1px solid var(--border-color);
 }
 
 .word-unit:hover {
-    background: #f8f9fa;
-    border-color: #e0e0e0;
+    background: var(--code-bg);
+    border-color: var(--border-color-darker);
     transform: translateY(-2px);
     box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
@@ -173,7 +173,7 @@
     display: block;
     font-size: 2rem;
     font-weight: 400;
-    color: #222;
+    color: var(--text-strong);
     margin-bottom: 0.35rem;
     line-height: 1.4;
     transition: color 0.2s;
@@ -196,13 +196,13 @@
 }
 
 .word-unit:hover .word-original {
-    color: #111;
+    color: var(--text-strong);
 }
 
 .word-english {
     display: block;
     font-size: 0.85rem;
-    color: #4a7c59;
+    color: var(--link-color);
     font-weight: 600;
     line-height: 1.3;
 }
@@ -362,52 +362,14 @@
 
 /* No interlinear message */
 .no-interlinear {
-    color: #888;
+    color: var(--text-secondary);
     font-style: italic;
     font-size: 0.9rem;
     margin-top: 0.5rem;
 }
 
 /* Dark mode */
-[data-theme="dark"] .word-original {
-    color: #eee;
-}
-
-[data-theme="dark"] .word-unit:hover .word-original {
-    color: #fff;
-}
-
-[data-theme="dark"] .word-unit:hover {
-    background: #2a2a2a;
-    border-color: #444;
-}
-
-[data-theme="dark"] .word-unit.expanded {
-    background: #1a2e1a;
-    border-color: #4a7c59;
-}
-
-[data-theme="dark"] .word-detail {
-    background: #222;
-    border-color: #444;
-}
-
-[data-theme="dark"] .word-detail-original {
-    color: #eee;
-}
-
-[data-theme="dark"] .word-detail-value {
-    color: #ddd;
-}
-
-[data-theme="dark"] .word-detail-definition {
-    color: #bbb;
-    border-top-color: #444;
-}
-
-[data-theme="dark"] .word-detail-header {
-    border-bottom-color: #444;
-}
+/* rely on theme variables */
 
 [data-theme="dark"] .verse-text {
     color: #ccc;

kjvstudy_org/templates/verse.html

@@ -53,14 +53,14 @@
 .words-of-christ .marginnote,
 .words-of-christ .sidenote-number,
 .words-of-christ label.sidenote-number {
-    color: #111;
+    color: var(--text-color);
 }
 
 [data-theme="dark"] .words-of-christ .sidenote,
 [data-theme="dark"] .words-of-christ .marginnote,
 [data-theme="dark"] .words-of-christ .sidenote-number,
 [data-theme="dark"] .words-of-christ label.sidenote-number {
-    color: #ddd;
+    color: var(--text-color);
 }
 
 /* Prevent word definitions from inheriting red color */
@@ -196,19 +196,11 @@
 }
 
 [data-theme="dark"] .cross-ref-tooltip {
-    background: #2a2a2a;
-    border-color: #444;
+    background: var(--bg-color);
+    border-color: var(--border-color-darker);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
-@media (prefers-color-scheme: dark) {
-    .cross-ref-tooltip {
-        background: #2a2a2a;
-        border-color: #444;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-    }
-}
-
 /* Interlinear styles - inline flow design */
 .interlinear-container {
     max-width: 100%;
@@ -622,7 +614,7 @@
         width: 100%;
         margin: 0.5rem 0;
         font-size: 0.9rem;
-        color: #666;
+        color: var(--text-color);
     }
 
     .interlinear-container,