Fix toggle button

cyclotruc · cyclotruc · commit 0106355d0815 · 2024-12-31T05:17:03.000Z
diff --git a/src/templates/base.jinja b/src/templates/base.jinja
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light">
+<html lang="en" class="">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -36,6 +36,15 @@
             {% block title %}Git ingest{% endblock %}
         </title>
         <script src="https://cdn.tailwindcss.com"></script>
+        <!-- Add Tailwind configuration right after loading Tailwind -->
+        <script>
+            tailwind.config = {
+                darkMode: 'class', // Enable class-based dark mode
+                theme: {
+                    extend: {}
+                }
+            }
+        </script>
         <script src="/static/js/utils.js"></script>
         <script src="/static/js/snow.js"></script>
         <style>
diff --git a/src/templates/components/navbar.jinja b/src/templates/components/navbar.jinja
@@ -23,10 +23,15 @@
 
     // Dark mode toggle functionality
     function initDarkMode() {
-        const isDark = localStorage.getItem('darkMode') === 'true' || 
+        // Check if user has previously set a preference
+        const isDark = localStorage.getItem('darkMode') === 'true' ||
                       (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
-        
-        document.documentElement.classList.toggle('dark', isDark);
+
+        if (isDark) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
         updateDarkModeIcon(isDark);
     }
 
@@ -39,7 +44,7 @@
     function updateDarkModeIcon(isDark) {
         const moonIcon = document.getElementById('moon-icon');
         const sunIcon = document.getElementById('sun-icon');
-        
+
         if (isDark) {
             moonIcon.classList.add('hidden');
             sunIcon.classList.remove('hidden');
@@ -50,7 +55,11 @@
     }
 
     // Initialize dark mode on page load
-    document.addEventListener('DOMContentLoaded', initDarkMode);
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initDarkMode);
+    } else {
+        initDarkMode();
+    }
 </script>
 <header class="sticky top-0 bg-[#FFFDF8] dark:bg-gray-900 border-b-[3px] border-gray-900 dark:border-gray-400 z-50">
     <div class="max-w-4xl mx-auto px-4">
@@ -90,16 +99,26 @@
                         <span id="github-stars">0</span>
                     </div>
                 </div>
-                <button onclick="toggleDarkMode()" 
+                <button onclick="toggleDarkMode()"
                         class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                         aria-label="Toggle dark mode">
                     <!-- Moon icon -->
-                    <svg id="moon-icon" class="w-5 h-5 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+                    <svg id="moon-icon"
+                         class="w-5 h-5 text-gray-900 dark:text-white"
+                         fill="none"
+                         stroke="currentColor"
+                         viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
+                        </path>
                     </svg>
                     <!-- Sun icon -->
-                    <svg id="sun-icon" class="hidden w-5 h-5 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                    <svg id="sun-icon"
+                         class="hidden w-5 h-5 text-gray-900 dark:text-white"
+                         fill="none"
+                         stroke="currentColor"
+                         viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
+                        </path>
                     </svg>
                 </button>
             </nav>
