fix: iOS 26 troubleshooting 1.0

frontend/index.html

@@ -6,6 +6,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark">
     <title>MotoVaultPro</title>
+
+    <!-- Dark mode initialization - MUST run before any other scripts -->
+    <!-- This prevents iOS 26 Safari from overriding our dark mode preference -->
+    <script>
+      (function() {
+        try {
+          const stored = localStorage.getItem('motovaultpro-mobile-settings');
+          const settings = stored ? JSON.parse(stored) : {};
+
+          // Check user preference, fall back to system preference
+          const prefersDark = settings.darkMode !== undefined
+            ? settings.darkMode
+            : window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+          if (prefersDark) {
+            document.documentElement.classList.add('dark');
+          } else {
+            document.documentElement.classList.remove('dark');
+          }
+        } catch (e) {
+          // Fallback to system preference on error
+          if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+          }
+        }
+      })();
+    </script>
+
     <!-- Runtime config MUST load synchronously before any module scripts -->
     <script src="/config.js"></script>
   </head>

frontend/src/index.css

@@ -15,20 +15,23 @@ body {
   box-sizing: border-box;
 }
 
+/* Tell browser we support both color schemes for native UI elements (scrollbars, form controls) */
+/* This enables iOS Safari to properly handle dark mode */
 :root {
-  color-scheme: light;
+  color-scheme: light dark;
-}
+  -webkit-color-scheme: light dark; /* iOS Safari fallback */
-
-:root.dark {
-  color-scheme: dark;
 }
 
+/* Base styles on html element */
 html {
   background-color: #ffffff;
   color: #1e293b;
 }
 
+/* Dark mode overrides when .dark class is present */
 html.dark {
   background-color: #231F1C;
   color: #F2F3F6;
+  color-scheme: dark;
+  -webkit-color-scheme: dark;
 }