UX: Send background color to iPad app too

UX: Send background color to iPad app too

Previously, we were only updating mobile devices.

diff --git a/app/assets/javascripts/discourse/app/initializers/mobile.js b/app/assets/javascripts/discourse/app/initializers/mobile.js
index b0708fc..d219ce5 100644
--- a/app/assets/javascripts/discourse/app/initializers/mobile.js
+++ b/app/assets/javascripts/discourse/app/initializers/mobile.js
@@ -1,7 +1,5 @@
-import { later } from "@ember/runloop";
 import Mobile from "discourse/lib/mobile";
 import { setResolverOption } from "discourse-common/resolver";
-import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
 
 // Initializes the `Mobile` helper object.
 export default {
@@ -16,14 +14,5 @@ export default {
     site.set("isMobileDevice", Mobile.isMobileDevice);
 
     setResolverOption("mobileView", Mobile.mobileView);
-
-    if (isAppWebview()) {
-      later(() => {
-        postRNWebviewMessage(
-          "headerBg",
-          $(".d-header").css("background-color")
-        );
-      }, 500);
-    }
   }
 };
diff --git a/app/assets/javascripts/discourse/app/initializers/webview-background.js b/app/assets/javascripts/discourse/app/initializers/webview-background.js
new file mode 100644
index 0000000..e24db7d
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/initializers/webview-background.js
@@ -0,0 +1,20 @@
+import { later } from "@ember/runloop";
+import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
+
+// Send bg color to webview so iOS status bar matches site theme
+export default {
+  name: "webview-background",
+  after: "inject-objects",
+
+  initialize() {
+    if (isAppWebview()) {
+      later(() => {
+        const header = document.querySelectorAll(".d-header")[0];
+        if (header) {
+          const styles = window.getComputedStyle(header);
+          postRNWebviewMessage("headerBg", styles.backgroundColor);
+        }
+      }, 500);
+    }
+  }
+};

GitHub sha: f57ecf22

1 Like