Update templates/index.html

templates/index.html

@@ -13,9 +13,15 @@
     <meta name="apple-mobile-web-app-title" content="RetinaScan">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="color-scheme" content="light dark">
 
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+        }
+    </script>
     <!-- Lucide Icons -->
     <script src="https://unpkg.com/lucide@latest"></script>
     
@@ -444,10 +450,20 @@
 
         function toggleTheme() {
             const body = document.body;
+            const html = document.documentElement;
             const current = body.getAttribute('data-theme');
             const target = current === 'light' ? 'dark' : 'light';
+            
+            // Toggle custom CSS variables
             body.setAttribute('data-theme', target);
             
+            // Toggle Tailwind dark mode classes
+            if (target === 'dark') {
+                html.classList.add('dark');
+            } else {
+                html.classList.remove('dark');
+            }
+            
             const icon = document.getElementById('theme-btn-icon');
             icon.setAttribute('data-lucide', target === 'light' ? 'moon' : 'sun');
             lucide.createIcons();