Update Status Bar to Match Theme Colors Dynamically

androidApp/src/main/kotlin/org/mifos/mobile/HomeActivity.kt

@@ -9,15 +9,20 @@
  */
 package org.mifos.mobile
 
+import android.graphics.Color
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.activity.viewModels
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.toArgb
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
@@ -30,6 +35,8 @@ import kotlinx.coroutines.launch
 import org.mifos.mobile.HomeActivityUiState.Success
 import org.mifos.mobile.core.data.utils.NetworkMonitor
 import org.mifos.mobile.core.designsystem.theme.MifosMobileTheme
+import org.mifos.mobile.core.designsystem.theme.darkScrim
+import org.mifos.mobile.core.designsystem.theme.lightScrim
 import org.mifos.mobile.navigation.MifosNavGraph.AUTH_GRAPH
 import org.mifos.mobile.navigation.MifosNavGraph.PASSCODE_GRAPH
 import org.mifos.mobile.navigation.RootNavGraph
@@ -73,6 +80,8 @@ class HomeActivity : ComponentActivity() {
 
             val appState = rememberMifosMobileState(networkMonitor = networkMonitor)
 
+            val darkTheme = isSystemInDarkTheme()
+
             val navDestination = when (uiState) {
                 is Success -> if ((uiState as Success).userData.isAuthenticated) {
                     PASSCODE_GRAPH
@@ -83,6 +92,20 @@ class HomeActivity : ComponentActivity() {
                 else -> AUTH_GRAPH
             }
 
+            DisposableEffect(darkTheme) {
+                enableEdgeToEdge(
+                    statusBarStyle = SystemBarStyle.auto(
+                        Color.TRANSPARENT,
+                        Color.TRANSPARENT
+                    ) { darkTheme },
+                    navigationBarStyle = SystemBarStyle.auto(
+                        lightScrim.toArgb(),
+                        darkScrim.toArgb()
+                    ) { darkTheme },
+                )
+                onDispose {}
+            }
+
             CompositionLocalProvider {
                 MifosMobileTheme {
                     RootNavGraph(

androidApp/src/main/res/values-night/color.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright 2024 Mifos Initiative
+
+    This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+    If a copy of the MPL was not distributed with this file,
+    You can obtain one at https://mozilla.org/MPL/2.0/.
+
+    See https://github.com/openMF/mobile-mobile/blob/master/LICENSE.md
+-->
+<resources>
+    <color name="status_bar">#FF1B1B1F</color> // dark/color.xml
+</resources>

androidApp/src/main/res/values-night/theme.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright 2024 Mifos Initiative
+
+    This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+    If a copy of the MPL was not distributed with this file,
+    You can obtain one at https://mozilla.org/MPL/2.0/.
+
+    See https://github.com/openMF/mobile-mobile/blob/master/LICENSE.md
+-->
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="NightAdjusted.Theme" parent="android:Theme.Material.NoActionBar">
+        <item name="android:statusBarColor">@color/status_bar</item>
+    </style>
+
+    <style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
+        <item name="android:windowLightNavigationBar" tools:targetApi="27">false</item>
+    </style>
+
+</resources>

androidApp/src/main/res/values/colors.xml

@@ -54,6 +54,7 @@
     <color name="gray_bright">#33CCCCCC</color>
 
     <!-- Material design colors -->
+    <color name="status_bar">#FFFEFBFF</color>
 
     <!-- New UI color palette -->
     <!--<color name="primary">#068799</color>-->

androidApp/src/main/res/values/splash.xml

@@ -8,18 +8,22 @@
 
     See https://github.com/openMF/mobile-mobile/blob/master/LICENSE.md
 -->
-<resources>
-    <style name="Theme.MifosSplash" parent="Theme.SplashScreen">
-        <item name="windowSplashScreenBackground">#FFFDFDF5</item>
-        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
-        <item name="postSplashScreenTheme">@style/AppTheme</item>
-        <item name="windowSplashScreenAnimationDuration">10</item>
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <!-- Allows us to override night specific attributes in the
+    values-night folder. -->
+    <style name="NightAdjusted.Theme" parent="android:Theme.Material.Light.NoActionBar">
+        <item name="android:statusBarColor">@color/status_bar</item>
     </style>
 
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-        <item name="android:statusBarColor">@color/background</item>
-        <item name="android:windowLightStatusBar">true</item>
-        <item name="android:windowContentOverlay">@null</item>
-        <item name="android:windowIsTranslucent">true</item>
+    <!-- The final theme we use -->
+    <style name="Theme.MifosSplash" parent="NightAdjusted.Theme" />
+
+    <style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
+        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
+    </style>
+
+    <style name="Theme.Mifos.Splash" parent="NightAdjusted.Theme.Splash">
+        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
+        <item name="postSplashScreenTheme">@style/Theme.MifosSplash</item>
     </style>
 </resources>

core/designsystem/src/main/kotlin/org/mifos/mobile/core/designsystem/theme/Color.kt

@@ -35,3 +35,6 @@ val DarkGray = Color(0xBB666666)
 val GreenSuccess = Color(0xff14c416)
 val LightSurfaceTint = Color(0xFF325CA8)
 val DarkSurfaceTint = Color(0xFFAEC6FF)
+
+val lightScrim = Color(0x80FFFFFF) // Light scrim with 50% opacity
+val darkScrim = Color(0x80000000) // Dark scrim with 50% opacity

core/designsystem/src/main/kotlin/org/mifos/mobile/core/designsystem/theme/Theme.kt

@@ -33,7 +33,7 @@ private val DarkThemeColors = darkColorScheme(
     secondary = Black1,
     error = RedErrorDark,
     background = BackgroundDark,
-    surface = Black1,
+    surface = BackgroundDark,
     onSurface = Color.White,
     onSecondary = Color.White,
     outlineVariant = Color.White,