From e65669fedef1ffa2a77f2ee4e1a1112f8d442309 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sat, 27 Dec 2025 20:29:25 -0600
Subject: [PATCH] fix: iOS 26 troubleshooting 1.0

---
 frontend/index.html    | 28 ++++++++++++++++++++++++++++
 frontend/src/index.css | 13 ++++++++-----
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 8cad153..8ba053d 100644
--- a/frontend/index.html
+++ b/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>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f46efae..025703c 100644
--- a/frontend/src/index.css
+++ b/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;
-}
-
-:root.dark {
-  color-scheme: dark;
+  color-scheme: light dark;
+  -webkit-color-scheme: light dark; /* iOS Safari fallback */
 }
 
+/* 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;
 }
\ No newline at end of file