From f9011f5ef477c6d2beb1b4f01f74039b2e071c90 Mon Sep 17 00:00:00 2001
From: Michael DiLeo <michael.dileo@oakstreethealth.com>
Date: Sun, 17 Aug 2025 12:29:26 -0500
Subject: [PATCH] fix dark/light theme toggle, adjust text, change images to
 png screenshots

---
 minify-build.js                     |  4 +-
 public/about.html                   |  2 +-
 public/index.html                   |  9 ++--
 public/site-scripts/theme-toggle.js | 79 +++++++++++++----------------
 4 files changed, 43 insertions(+), 51 deletions(-)

diff --git a/minify-build.js b/minify-build.js
index bd51d3d..cd7b0a8 100644
--- a/minify-build.js
+++ b/minify-build.js
@@ -289,12 +289,12 @@ async function bundleAndMinifyJS() {
 async function minifyHTMLFile(inputPath, outputPath) {
     const html = await fs.readFile(inputPath, 'utf8');
     
-    // Update CSS references for production and add script reference
+    // Update CSS references for production and update script reference
     let updatedHTML = html
         .replace(/<link rel="stylesheet" href="css\/pico\.jade\.min\.css">/g, '')
         .replace(/<link rel="stylesheet" href="site-styles\/style\.css">/g, 
                 '<link rel="stylesheet" href="css/bundle.css">')
-        .replace(/<\/body>/g, '<script src="scripts/bundle.js"></script></body>');
+        .replace(/<script src="site-scripts\/theme-toggle\.js"><\/script>/g, ''); // Remove individual script references
 
     const minified = await htmlMinify(updatedHTML, {
         collapseWhitespace: true,
diff --git a/public/about.html b/public/about.html
index b305bfd..d440652 100644
--- a/public/about.html
+++ b/public/about.html
@@ -54,7 +54,7 @@
         <p>Keyboard Vagabond is a place where nomads, travelers, backpacker, whoever, can come together in a digital space that is free of advertising and the attention economy to share information and experiences. It is a place of mutual respect, courtesy, and understanding not just for the members who join, but also for those people and places we encounter on our journeys.</p>
         
         <h4>Why Keyboard Vagabond</h4>
-        <p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was a space specifically for nomads, so I thought I would make it.</p>
+        <p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was not a space specifically for nomads, so I thought I would make it.</p>
         
         <h2>What to expect and commitments</h2>
         <p><strong>Moderation style</strong> - 
diff --git a/public/index.html b/public/index.html
index c2dd37b..9261b13 100644
--- a/public/index.html
+++ b/public/index.html
@@ -136,24 +136,24 @@
         <div class="photo-gallery">
             <div class="photo-item">
                 <small>Check out that Explore button on the main page.</small>
-                <img src="https://picsur.keyboardvagabond.com/i/48624639-e731-4e50-a166-f88cf9eccded.jpg?width=400"
+                <img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=400"
                     alt="Explore button on main page" loading="lazy" />
             </div>
             <div class="photo-item">
                 <small>Visit the Posts, Hashtags, and News tabs to see what's on the server</small>
-                <img src="https://picsur.keyboardvagabond.com/i/d05996c7-5c23-450e-9ca0-b7e532d1c700.jpg?width=700"
+                <img src="https://picsur.keyboardvagabond.com/i/aea3c3c5-b011-4680-be4c-96fc1fdb009a.png?width=700"
                     alt="Posts, Hashtags, and News tabs" loading="lazy" />
             </div>
             <div class="photo-item">
                 <small>Look at the local communities to see what communities have been created on this server specifically. The rest of the communities are ones that this server is following.
                     Following communities on other instances will result in them being shown here.
                 </small>
-                <img src="https://picsur.michaeldileo.org/i/e07dddbc-d264-4f12-8877-17eed896026a.jpg?width=700"
+                <img src="https://picsur.keyboardvagabond.com/i/b5d316d9-8958-47bf-ba74-fb853e2d2be8.png?width=700"
                     alt="Communities, Local Communities" loading="lazy" />
             </div>
             <div class="photo-item">
                 <small>Scroll all the way to the bottom to find local topics. Topics are groups of communities. You can suggest more in the Meta community.</small>
-                <img src="https://picsur.michaeldileo.org/i/5a977aa0-b9bb-4376-a348-f879c7162f63.jpg?width=700"
+                <img src="https://picsur.keyboardvagabond.com/i/e5909364-3c4f-4bca-8631-5b1225781177.png?width=700"
                     alt="Local topics" loading="lazy" />
             </div>
         </div>
@@ -163,6 +163,7 @@
     <footer></footer>
 
     <script src="scripts/bundle.js"></script>
+    <script src="site-scripts/theme-toggle2.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/site-scripts/theme-toggle.js b/public/site-scripts/theme-toggle.js
index 12c792c..ff286b1 100644
--- a/public/site-scripts/theme-toggle.js
+++ b/public/site-scripts/theme-toggle.js
@@ -1,23 +1,25 @@
 (function() {
     const themeToggle = document.getElementById('theme-toggle');
     const themeIcon = document.getElementById('theme-icon');
-    
-    function getStoredTheme() {
-        return localStorage.getItem('picoPreferredColorScheme') || 'auto';
-    }
-    
+
+
     function storeTheme(theme) {
         localStorage.setItem('picoPreferredColorScheme', theme);
     }
-    
-    function getSystemTheme() {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+    function getStoredTheme() {
+        return localStorage.getItem('picoPreferredColorScheme');
     }
-    
-    function applyTheme(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        
-        if (theme === 'dark') {
+
+    function getCurrentTheme() {
+        return document.documentElement.getAttribute('data-theme') || 
+            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    }
+
+    function applyTheme(currentTheme) {
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        if (newTheme === 'dark') {
             themeIcon.textContent = '☀️';
             themeToggle.setAttribute('aria-pressed', 'true');
         } else {
@@ -25,39 +27,28 @@
             themeToggle.setAttribute('aria-pressed', 'false');
         }
     }
-    
-    function toggleTheme() {
-        let currentStored = getStoredTheme();
-        if (currentStored === 'auto') {
-            currentStored = getSystemTheme();
-        }
-        if (currentStored === 'auto') {
-            currentStored = 'light';
-        }
-        let nextTheme;
-        
-        nextTheme = currentStored === 'light' ? 'dark' : 'light';
-        
-        storeTheme(nextTheme);
-        applyTheme(nextTheme);
-    }
-    
-    function init() {
-        if (themeToggle) {
 
-            let storedTheme = getStoredTheme();
-            if (storedTheme && storedTheme !== 'auto') {
-                applyTheme(storedTheme);
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = getCurrentTheme();
+        
+        applyTheme(currentTheme);
+        storeTheme(currentTheme);
+    });
+
+    function init() {
+        let storedTheme = getStoredTheme() || getCurrentTheme();
+        
+        applyTheme(storedTheme);
+        
+        themeToggle.addEventListener('click', toggleTheme);
+        
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            // Only apply theme if user hasn't made an explicit choice
+            const storedTheme = getStoredTheme();
+            if (storedTheme === 'auto') {
+                applyTheme();
             }
-            
-            themeToggle.addEventListener('click', toggleTheme);
-            
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-                if (getStoredTheme() === 'auto') {
-                    applyTheme();
-                }
-            });
-        }
+        })
     }
     
     if (document.readyState !== 'loading') {