UX: Update header background color in mobile app webview

UX: Update header background color in mobile app webview

Sends the updated value when switching color schemes.

diff --git a/app/assets/javascripts/discourse/app/initializers/webview-background.js b/app/assets/javascripts/discourse/app/initializers/webview-background.js
index e24db7d..6a1ac30 100644
--- a/app/assets/javascripts/discourse/app/initializers/webview-background.js
+++ b/app/assets/javascripts/discourse/app/initializers/webview-background.js
@@ -8,13 +8,19 @@ export default {
 
   initialize() {
     if (isAppWebview()) {
-      later(() => {
-        const header = document.querySelectorAll(".d-header")[0];
-        if (header) {
-          const styles = window.getComputedStyle(header);
-          postRNWebviewMessage("headerBg", styles.backgroundColor);
-        }
-      }, 500);
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addListener(this.updateAppBackground);
+      this.updateAppBackground();
     }
+  },
+  updateAppBackground() {
+    later(() => {
+      const header = document.querySelectorAll(".d-header")[0];
+      if (header) {
+        const styles = window.getComputedStyle(header);
+        postRNWebviewMessage("headerBg", styles.backgroundColor);
+      }
+    }, 500);
   }
 };

GitHub sha: 31e9e0c4