Media: makes sure system ui get back to normal when leaving preview/viewer

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewNode.kt

@@ -27,7 +27,7 @@ import io.element.android.anvilannotations.ContributesNode
 import io.element.android.features.messages.impl.attachments.Attachment
 import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.inputs
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.ForcedDarkElementTheme
 import io.element.android.libraries.di.RoomScope
 
 @ContributesNode(RoomScope::class)
@@ -45,7 +45,7 @@ class AttachmentsPreviewNode @AssistedInject constructor(
 
     @Composable
     override fun View(modifier: Modifier) {
-        ElementTheme(darkTheme = true) {
+        ForcedDarkElementTheme {
             val state = presenter.present()
             AttachmentsPreviewView(
                 state = state,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/viewer/MediaViewerNode.kt

@@ -26,7 +26,7 @@ import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
 import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.inputs
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.ForcedDarkElementTheme
 import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.matrix.api.media.MediaSource
 
@@ -49,7 +49,7 @@ class MediaViewerNode @AssistedInject constructor(
 
     @Composable
     override fun View(modifier: Modifier) {
-        ElementTheme(darkTheme = true) {
+        ForcedDarkElementTheme {
             val state = presenter.present()
             MediaViewerView(
                 state = state,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTheme.kt

@@ -24,12 +24,14 @@ import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import com.google.accompanist.systemuicontroller.SystemUiController
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 
 /**
@@ -55,7 +57,6 @@ fun ElementTheme(
     content: @Composable () -> Unit,
 ) {
     val systemUiController = rememberSystemUiController()
-    val useDarkIcons = !darkTheme
     val currentColor = remember(darkTheme) {
         colors.copy()
     }.apply { updateColorsFrom(colors) }
@@ -68,13 +69,7 @@ fun ElementTheme(
         else -> materialLightColors
     }
     SideEffect {
-        systemUiController.setStatusBarColor(
+        systemUiController.applyTheme(colorScheme = colorScheme, darkTheme = darkTheme)
-            color = colorScheme.background
-        )
-        systemUiController.setSystemBarsColor(
-            color = Color.Transparent,
-            darkIcons = useDarkIcons
-        )
     }
     CompositionLocalProvider(
         LocalColors provides currentColor,
@@ -86,3 +81,36 @@ fun ElementTheme(
         )
     }
 }
+
+/**
+ * Can be used to force a composable in dark theme.
+ * It will automatically change the system ui colors back to normal when leaving the composition.
+ */
+@Composable
+fun ForcedDarkElementTheme(
+    content: @Composable () -> Unit,
+) {
+    val systemUiController = rememberSystemUiController()
+    val colorScheme = MaterialTheme.colorScheme
+    val wasDarkTheme = !ElementTheme.colors.isLight
+    DisposableEffect(Unit) {
+        onDispose {
+            systemUiController.applyTheme(colorScheme, wasDarkTheme)
+        }
+    }
+    ElementTheme(darkTheme = true, content = content)
+}
+
+private fun SystemUiController.applyTheme(
+    colorScheme: ColorScheme,
+    darkTheme: Boolean,
+) {
+    val useDarkIcons = !darkTheme
+    setStatusBarColor(
+        color = colorScheme.background
+    )
+    setSystemBarsColor(
+        color = Color.Transparent,
+        darkIcons = useDarkIcons
+    )
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Divider.kt

@@ -17,7 +17,6 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.DividerDefaults
 import androidx.compose.runtime.Composable

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt

@@ -29,8 +29,6 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 
 @Composable