feat: sync android status bar bg with theme bg color (#1727)

packages/mobile/src/Lib/Interface.ts

@@ -78,6 +78,7 @@ export class MobileDevice implements MobileDeviceInterface {
   platform: SNPlatform.Ios | SNPlatform.Android = Platform.OS === 'ios' ? SNPlatform.Ios : SNPlatform.Android
   private eventObservers: MobileDeviceEventHandler[] = []
   public isDarkMode = false
+  public statusBarBgColor: string | undefined
 
   constructor(
     private stateObserverService?: AppStateObserverService,
@@ -450,13 +451,17 @@ export class MobileDevice implements MobileDeviceInterface {
     }
   }
 
-  handleThemeSchemeChange(isDark: boolean): void {
+  handleThemeSchemeChange(isDark: boolean, bgColor: string): void {
     this.isDarkMode = isDark
+    this.statusBarBgColor = bgColor
 
     this.reloadStatusBarStyle()
   }
 
   reloadStatusBarStyle(animated = true) {
+    if (this.statusBarBgColor) {
+      StatusBar.setBackgroundColor(this.statusBarBgColor, animated)
+    }
     StatusBar.setBarStyle(this.isDarkMode ? 'light-content' : 'dark-content', animated)
   }
 

packages/services/src/Domain/Device/MobileDeviceInterface.ts

@@ -12,7 +12,7 @@ export interface MobileDeviceInterface extends DeviceInterface {
   hideMobileInterfaceFromScreenshots(): void
   stopHidingMobileInterfaceFromScreenshots(): void
   consoleLog(...args: any[]): void
-  handleThemeSchemeChange(isDark: boolean): void
+  handleThemeSchemeChange(isDark: boolean, bgColor: string): void
   shareBase64AsFile(base64: string, filename: string): Promise<void>
   downloadBase64AsFile(base64: string, filename: string, saveInTempLocation?: boolean): Promise<string | undefined>
   confirmAndExit(): void

packages/ui-services/src/Theme/ThemeManager.ts

@@ -288,12 +288,24 @@ export class ThemeManager extends AbstractService {
     link.rel = 'stylesheet'
     link.media = 'screen,print'
     link.id = theme.uuid
-    link.onload = this.syncThemeColorMetadata
-    document.getElementsByTagName('head')[0].appendChild(link)
+    link.onload = () => {
+      this.syncThemeColorMetadata()
 
-    if (this.application.isNativeMobileWeb()) {
-      this.application.mobileDevice.handleThemeSchemeChange(theme.package_info.isDark ?? false)
+      if (this.application.isNativeMobileWeb()) {
+        setTimeout(() => {
+          this.application.mobileDevice.handleThemeSchemeChange(
+            theme.package_info.isDark ?? false,
+            this.getBackgroundColor(),
+          )
+        })
+      }
     }
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
+
+  private getBackgroundColor() {
+    const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--sn-stylekit-background-color').trim()
+    return bgColor.length ? bgColor : '#ffffff'
   }
 
   /**
@@ -306,8 +318,7 @@ export class ThemeManager extends AbstractService {
       return
     }
 
-    const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--sn-stylekit-background-color')
-    themeColorMetaElement.setAttribute('content', bgColor ? bgColor.trim() : '#ffffff')
+    themeColorMetaElement.setAttribute('content', this.getBackgroundColor())
   }
 
   private deactivateTheme(uuid: string) {
@@ -324,7 +335,7 @@ export class ThemeManager extends AbstractService {
     removeFromArray(this.activeThemes, uuid)
 
     if (this.activeThemes.length === 0 && this.application.isNativeMobileWeb()) {
-      this.application.mobileDevice.handleThemeSchemeChange(false)
+      this.application.mobileDevice.handleThemeSchemeChange(false, '#ffffff')
     }
   }