Use a custom page that handles theme changes

brave · Feb 27, 2025 · d4bc3c0 · d4bc3c0
1 parent fee42b1
commit d4bc3c0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/ios/brave-ios/Package.swift b/ios/brave-ios/Package.swift
@@ -488,6 +488,7 @@ var braveTarget: PackageDescription.Target = .target(
   ],
   resources: [
     .copy("Assets/About/Licenses.html"),
+    .copy("Assets/About/AboutHome.html"),
     .copy("Assets/__firefox__.js"),
     .copy("Assets/AllFramesAtDocumentEnd.js"),
     .copy("Assets/AllFramesAtDocumentEndSandboxed.js"),

diff --git a/ios/brave-ios/Sources/Brave/Assets/About/AboutHome.html b/ios/brave-ios/Sources/Brave/Assets/About/AboutHome.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Home</title>
+    <style>
+      body {
+        transition: background-color 0.1s, color 0.1s;
+      }
+
+      body.light-mode {
+        background-color: #LIGHT_MODE_COLOUR;
+        color: black;
+      }
+
+      body.dark-mode {
+        background-color: #DARK_MODE_COLOUR;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      function applyTheme() {
+        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          document.body.classList.remove("light-mode");
+          document.body.classList.add('dark-mode');
+        } else {
+          document.body.classList.remove("dark-mode");
+          document.body.classList.add("light-mode");
+        }
+      }
+
+      applyTheme();
+
+      let themeMatch = window.matchMedia("(prefers-color-scheme: dark)");
+      if (themeMatch) {
+        themeMatch.addEventListener("change", (event) => {
+          applyTheme();
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/ios/brave-ios/Sources/Brave/Frontend/Browser/Handlers/AboutHomeHandler.swift b/ios/brave-ios/Sources/Brave/Frontend/Browser/Handlers/AboutHomeHandler.swift
@@ -14,14 +14,24 @@ public class AboutHomeHandler: InternalSchemeResponse {
   public func response(forRequest request: URLRequest) async -> (URLResponse, Data)? {
     guard let url = request.url else { return nil }
     let response = InternalSchemeHandler.response(forUrl: url)
-    let bg = UIColor.braveBackground.toHexString()
+
+    let lightModeColour = UIColor.braveBackground.resolvedColor(
+      with: .init(userInterfaceStyle: .light)
+    ).toHexString()
+    let darkModeColour = UIColor.braveBackground.resolvedColor(
+      with: .init(userInterfaceStyle: .dark)
+    ).toHexString()
+
     // Blank page with a color matching the background of the panels which is displayed for a split-second until the panel shows.
-    let html = """
-      <!DOCTYPE html>
-      <html>
-        <body style='background-color: #\(bg)'></body>
-      </html>
-      """
+    guard let asset = Bundle.module.url(forResource: "AboutHome", withExtension: "html"),
+      var html = await AsyncFileManager.default.utf8Contents(at: asset)
+    else {
+      return nil
+    }
+
+    html = html.replacingOccurrences(of: "LIGHT_MODE_COLOUR", with: lightModeColour)
+      .replacingOccurrences(of: "DARK_MODE_COLOUR", with: darkModeColour)
+
     let data = Data(html.utf8)
     return (response, data)
   }