From 8d17d9ea23b261eb7a3004cfe32bcd4f78cb0ab3 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Fri, 28 Nov 2025 15:54:16 -0500
Subject: [PATCH] Add red letter toggle to sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add toggle link at bottom of sidebar (before flourish)
- Use localStorage to persist user preference
- CSS hides .words-of-christ color when disabled
- JavaScript handles toggle and initialization on page load
- Toggle text changes between "Enable" and "Disable"

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/base.html | 40 ++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 79ea83d..04b9dec 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -79,6 +79,11 @@
             --code-bg: #2a2a2a;
         }
 
+        /* Red letter toggle - hide red letters when disabled */
+        [data-red-letters="disabled"] .words-of-christ {
+            color: inherit !important;
+        }
+
         /* Override Tufte CSS sidenote constraints */
         .sidenote,
         .marginnote {
@@ -1296,6 +1301,15 @@
             </p>
         </div>
 
+        <!-- Red Letter Toggle -->
+        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
+            <p style="font-size: 0.85rem; color: var(--text-tertiary); text-align: center;">
+                <a href="#" id="red-letter-toggle" style="color: var(--text-tertiary); text-decoration: none; border-bottom: 1px dotted var(--border-color-dark);" onclick="toggleRedLetters(event)">
+                    <span id="red-letter-status">Disable</span> Red Letters
+                </a>
+            </p>
+        </div>
+
         <!-- Flourish -->
         <div class="sidebar-flourish">⁂</div>
     </nav>
@@ -1315,6 +1329,32 @@
         localStorage.setItem('theme', newTheme);
       }
 
+      // Red letter toggle functionality
+      (function() {
+        // Check for saved red letter preference or default to enabled
+        const redLettersEnabled = localStorage.getItem('redLetters') !== 'disabled';
+        if (!redLettersEnabled) {
+          document.documentElement.setAttribute('data-red-letters', 'disabled');
+          document.getElementById('red-letter-status').textContent = 'Enable';
+        }
+      })();
+
+      function toggleRedLetters(event) {
+        event.preventDefault();
+        const currentState = document.documentElement.getAttribute('data-red-letters');
+        const newState = currentState === 'disabled' ? 'enabled' : 'disabled';
+
+        if (newState === 'disabled') {
+          document.documentElement.setAttribute('data-red-letters', 'disabled');
+          document.getElementById('red-letter-status').textContent = 'Enable';
+          localStorage.setItem('redLetters', 'disabled');
+        } else {
+          document.documentElement.removeAttribute('data-red-letters');
+          document.getElementById('red-letter-status').textContent = 'Disable';
+          localStorage.removeItem('redLetters');
+        }
+      }
+
       // Sidebar collapse state persistence
       (function() {
         var toggle = document.getElementById('sidebar-toggle');