Repository: opensrp/fhircore
Issue: [Quest] App crashes if user switches to Dark mode 

**Describe the bug**
App crashes if the user switches to Dark mode

**To Reproduce**
Steps to reproduce the behaviour:
1. Go to  the Quest app
2. If the application has the ability to switch to dark mode switch to it 
3. App will crash or the Text appears to be whitewashed in Dark mode 

**Expected behaviour**
1. If the Dark mode theme is configured user should be able to switch to the dark mode 
2. Test should be legible 
3. App should not crash on the switch from Dark/Light mode 


**Smartphone (please complete the following information):**
 - Device: Pixel 4a
 - Android version: 13

**Additional context**
See the screen recording here 


https://user-images.githubusercontent.com/4540684/235115013-e612e034-7149-4cd4-a813-e9473efa8071.mp4


https://user-images.githubusercontent.com/4540684/235115087-8d5415dd-404b-4ae2-b1c4-84725e9792bc.mp4






Changed files:
android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Themes.kt

diff --git a/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Themes.kt b/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Themes.kt
index 80802dc2f..874cef735 100644
--- a/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Themes.kt
+++ b/android/engine/src/main/java/org/smartregister/fhircore/engine/ui/theme/Themes.kt
@@ -16,8 +16,11 @@
 
 package org.smartregister.fhircore.engine.ui.theme
 
+import androidx.appcompat.app.AppCompatDelegate
 import androidx.compose.material.MaterialTheme
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewmodel.compose.viewModel
 
 /**
  * TODO fix issue with ktfmt formatting annotated high order functions. Current workaround below:
@@ -25,7 +28,47 @@ import androidx.compose.runtime.Composable
  *
  * To enable app theme set darkTheme = isSystemInDarkTheme
  */
+//@Composable
+//fun AppTheme(darkTheme: Boolean = false, content: (@Composable() () -> Unit)) {
+//  MaterialTheme(colors = if (darkTheme) DarkColors else LightColors, content = content)
+//}
+
+class ThemeViewModel : ViewModel() {
+  var isSystemInDarkTheme by mutableStateOf(false)
+    private set
+
+  fun updateTheme(isDarkTheme: Boolean) {
+    isSystemInDarkTheme = isDarkTheme
+    val theme = if (isSystemInDarkTheme) AppCompatDelegate.MODE_NIGHT_YES else AppCompatDelegate.MODE_NIGHT_NO
+    AppCompatDelegate.setDefaultNightMode(theme)
+  }
+}
+
 @Composable
-fun AppTheme(darkTheme: Boolean = false, content: (@Composable() () -> Unit)) {
-  MaterialTheme(colors = if (darkTheme) DarkColors else LightColors, content = content)
+fun AppTheme(content: @Composable () -> Unit) {
+  val themeViewModel: ThemeViewModel = viewModel()
+
+  // Set the app's theme based on the system theme
+  val theme = if (themeViewModel.isSystemInDarkTheme) AppCompatDelegate.MODE_NIGHT_YES else AppCompatDelegate.MODE_NIGHT_NO
+  AppCompatDelegate.setDefaultNightMode(theme)
+
+  CompositionLocalProvider(LocalThemeViewModel provides themeViewModel) {
+    content()
+  }
 }
+
+val LocalThemeViewModel = staticCompositionLocalOf<ThemeViewModel> {
+  error("No ThemeViewModel provided")
+}
+
+@Composable
+fun ChildComposable() {
+  val themeViewModel = LocalThemeViewModel.current
+
+  // Access and observe the system theme state from the ThemeViewModel
+
+  val isSystemInDarkTheme by themeViewModel::isSystemInDarkTheme
+
+  // Use the system theme state in your composables
+  // ...
+}
\\ No newline at end of file