fix dark/light theme toggle, adjust text, change images to png screenshots

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,

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> - 

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>

public/site-scripts/theme-toggle.js

@@ -2,22 +2,24 @@
     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() {
+    function getStoredTheme() {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        return localStorage.getItem('picoPreferredColorScheme');
     }
 
-    function applyTheme(theme) {
+    function getCurrentTheme() {
-        document.documentElement.setAttribute('data-theme', theme);
+        return document.documentElement.getAttribute('data-theme') || 
+            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    }
 
-        if (theme === 'dark') {
+    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 {
@@ -26,38 +28,27 @@
         }
     }
 
-    function toggleTheme() {
+    themeToggle.addEventListener('click', () => {
-        let currentStored = getStoredTheme();
+        const currentTheme = getCurrentTheme();
-        if (currentStored === 'auto') {
-            currentStored = getSystemTheme();
-        }
-        if (currentStored === 'auto') {
-            currentStored = 'light';
-        }
-        let nextTheme;
         
-        nextTheme = currentStored === 'light' ? 'dark' : 'light';
+        applyTheme(currentTheme);
-        
+        storeTheme(currentTheme);
-        storeTheme(nextTheme);
+    });
-        applyTheme(nextTheme);
-    }
 
     function init() {
-        if (themeToggle) {
+        let storedTheme = getStoredTheme() || getCurrentTheme();
         
-            let storedTheme = getStoredTheme();
+        applyTheme(storedTheme);
-            if (storedTheme && storedTheme !== 'auto') {
+        
-                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') {