Improve theme detection with system preference fallback

Author: HarithKavish

docs/index.html

@@ -5,13 +5,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Multi-Object Detection using YOLO</title>
-    <!-- Theme detection before any rendering -->
+
+    <!-- Theme detection - BEFORE CSS to prevent flash -->
     <script>
-        const theme = localStorage.getItem('theme');
-        if (theme === 'dark') {
-            document.documentElement.classList.add('dark');
-        }
+        (function () {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+            if (savedTheme === 'dark' || (prefersDark && !savedTheme)) {
+                document.documentElement.classList.add('dark');
+            }
+        })();
     </script>
+
     <link rel="stylesheet" href="style.css">
     <!-- Load TensorFlow.js and COCO-SSD -->
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>