Adapt profile, notifications, and comments screens to dark mode (#68)

gpunto · web-flow · commit ae31b27ca55d · 2025-09-04T09:14:05.000+02:00
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -54,6 +54,7 @@ androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-toolin
 androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+androidx-material2 = { group = "androidx.compose.material", name = "material" }
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
 coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
 coil-network-okhttp = { module = "io.coil-kt.coil3:coil-network-okhttp", version.ref = "coil" }
diff --git a/stream-feeds-android-sample/build.gradle.kts b/stream-feeds-android-sample/build.gradle.kts
@@ -66,6 +66,7 @@ dependencies {
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
+    implementation(libs.androidx.material2)
     implementation(libs.composeDestinations.core)
     ksp(libs.composeDestinations.ksp)
     implementation(libs.composeDestinations.bottomSheet)
diff --git a/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/feed/CommentsBottomSheet.kt b/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/feed/CommentsBottomSheet.kt
@@ -40,6 +40,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -81,27 +82,31 @@ data class CommentsSheetArgs(val feedId: String, val activityId: String) {
 )
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun ColumnScope.CommentsBottomSheet(navigator: DestinationsNavigator) {
+fun CommentsBottomSheet(navigator: DestinationsNavigator) {
     val viewModel = hiltViewModel<CommentsSheetViewModel>()
     val state by viewModel.state.collectAsStateWithLifecycle()
 
-    when (val state = state) {
-        AsyncResource.Loading -> LoadingScreen()
+    Surface {
+        when (val state = state) {
+            AsyncResource.Loading -> LoadingScreen()
 
-        AsyncResource.Error -> {
-            LaunchedEffect(Unit) { navigator.popBackStack() }
-            return
-        }
+            AsyncResource.Error -> {
+                LaunchedEffect(Unit) { navigator.popBackStack() }
+                return@Surface
+            }
 
-        is AsyncResource.Content -> {
-            val comments by state.data.second.comments.collectAsStateWithLifecycle()
-            val currentUserId = state.data.first.id
+            is AsyncResource.Content -> {
+                val comments by state.data.second.comments.collectAsStateWithLifecycle()
+                val currentUserId = state.data.first.id
 
-            CommentsBottomSheetContent(
-                comments = comments,
-                currentUserId = currentUserId,
-                onEvent = viewModel::onEvent,
-            )
+                Column {
+                    CommentsBottomSheetContent(
+                        comments = comments,
+                        currentUserId = currentUserId,
+                        onEvent = viewModel::onEvent,
+                    )
+                }
+            }
         }
     }
 }
diff --git a/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/notification/NotificationsScreen.kt b/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/notification/NotificationsScreen.kt
@@ -31,6 +31,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Button
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -66,19 +67,23 @@ data class NotificationsScreenArgs(val feedId: String) {
 fun NotificationsScreen(navigator: DestinationsNavigator) {
     val viewModel = hiltViewModel<NotificationsViewModel>()
     val state by viewModel.state.collectAsStateWithLifecycle()
-    when (val state = state) {
-        AsyncResource.Loading -> LoadingScreen()
-        AsyncResource.Error -> {
-            LaunchedEffect(Unit) { navigator.popBackStack() }
-            return
+
+    Surface {
+        when (val state = state) {
+            AsyncResource.Loading -> LoadingScreen()
+            AsyncResource.Error -> {
+                LaunchedEffect(Unit) { navigator.popBackStack() }
+                return@Surface
+            }
+
+            is AsyncResource.Content ->
+                NotificationsScreen(
+                    state = state.data,
+                    onMarkAllSeen = viewModel::onMarkAllSeen,
+                    onMarkAggregatedActivityRead = viewModel::onMarkAggregatedActivityRead,
+                    onMarkAllRead = viewModel::onMarkAllRead,
+                )
         }
-        is AsyncResource.Content ->
-            NotificationsScreen(
-                state = state.data,
-                onMarkAllSeen = viewModel::onMarkAllSeen,
-                onMarkAggregatedActivityRead = viewModel::onMarkAggregatedActivityRead,
-                onMarkAllRead = viewModel::onMarkAllRead,
-            )
     }
 }
 
diff --git a/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/profile/ProfileScreen.kt b/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/profile/ProfileScreen.kt
@@ -16,22 +16,25 @@
 package io.getstream.feeds.android.sample.profile
 
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
@@ -70,21 +73,23 @@ fun ProfileScreen(navigator: DestinationsNavigator) {
 
     val state by viewModel.state.collectAsStateWithLifecycle()
 
-    when (val state = state) {
-        AsyncResource.Loading -> LoadingScreen()
+    Surface {
+        when (val state = state) {
+            AsyncResource.Loading -> LoadingScreen()
 
-        AsyncResource.Error -> {
-            LaunchedEffect(Unit) { navigator.popBackStack() }
-            return
-        }
+            AsyncResource.Error -> {
+                LaunchedEffect(Unit) { navigator.popBackStack() }
+                return@Surface
+            }
 
-        is AsyncResource.Content ->
-            ProfileScreen(
-                state = state.data,
-                followSuggestions = viewModel.followSuggestions,
-                onFollowClick = viewModel::follow,
-                onUnfollowClick = viewModel::unfollow,
-            )
+            is AsyncResource.Content ->
+                ProfileScreen(
+                    state = state.data,
+                    followSuggestions = viewModel.followSuggestions,
+                    onFollowClick = viewModel::follow,
+                    onUnfollowClick = viewModel::unfollow,
+                )
+        }
     }
 }
 
@@ -95,7 +100,12 @@ fun ProfileScreen(
     onFollowClick: (FeedId) -> Unit,
     onUnfollowClick: (FeedId) -> Unit,
 ) {
-    Column(modifier = Modifier.fillMaxSize().systemBarsPadding().padding(16.dp)) {
+    val scrollState = rememberScrollState()
+
+    Column(
+        modifier =
+            Modifier.fillMaxSize().systemBarsPadding().verticalScroll(scrollState).padding(16.dp)
+    ) {
         Text(
             text = "Profile",
             fontSize = 24.sp,
@@ -154,14 +164,12 @@ fun ProfileScreen(
         val followSuggestions by followSuggestions.collectAsStateWithLifecycle()
         SectionTitle("Who to follow")
         if (followSuggestions.isNotEmpty()) {
-            LazyColumn {
-                items(followSuggestions) {
-                    FollowSuggestionItem(
-                        owner = it.createdBy,
-                        fid = it.fid,
-                        onFollowClick = onFollowClick,
-                    )
-                }
+            followSuggestions.forEach {
+                FollowSuggestionItem(
+                    owner = it.createdBy,
+                    fid = it.fid,
+                    onFollowClick = onFollowClick,
+                )
             }
         } else {
             Text(text = "-No follow suggestions-")
@@ -191,7 +199,7 @@ private fun <T> ProfileSection(
     if (items.isNotEmpty()) {
         items.forEach { item -> itemContent(item) }
     } else {
-        Text(text = emptyText, color = Color.Gray)
+        Text(text = emptyText, color = MaterialTheme.colorScheme.onSurfaceVariant)
     }
 
     HorizontalDivider(Modifier.fillMaxWidth().padding(vertical = 16.dp))
@@ -200,20 +208,20 @@ private fun <T> ProfileSection(
 @Composable
 fun FollowingItem(follow: FollowData, onUnfollowClick: (FeedId) -> Unit) {
     Row(
-        modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp),
+        modifier = Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
     ) {
         Text(
             text = follow.targetFeed.createdBy.run { name ?: id },
             fontSize = 16.sp,
             fontWeight = FontWeight.Bold,
         )
-        Text(
-            modifier = Modifier.clickable { onUnfollowClick(follow.targetFeed.fid) },
-            text = "Unfollow",
-            fontSize = 14.sp,
-            color = Color.Blue,
-        )
+        CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {
+            TextButton(onClick = { onUnfollowClick(follow.targetFeed.fid) }) {
+                Text(text = "Unfollow")
+            }
+        }
     }
 }
 
@@ -237,19 +245,13 @@ fun FollowSuggestionItem(owner: UserData, fid: FeedId, onFollowClick: (FeedId) -
                 )
             }
         }
-        Card(
+        OutlinedButton(
             modifier = Modifier.padding(start = 8.dp).align(Alignment.CenterVertically),
             shape = CircleShape,
             border = BorderStroke(1.dp, Color.Gray),
-            colors = CardDefaults.cardColors(containerColor = Color.Transparent),
             onClick = { onFollowClick(fid) },
         ) {
-            Text(
-                text = "Follow",
-                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
-                fontSize = 14.sp,
-                color = Color.Blue,
-            )
+            Text(text = "Follow")
         }
     }
 }
diff --git a/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/ui/theme/Theme.kt b/stream-feeds-android-sample/src/main/java/io/getstream/feeds/android/sample/ui/theme/Theme.kt
@@ -26,9 +26,33 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalContext
 
 private val DarkColorScheme = darkColorScheme()
-
 private val LightColorScheme = lightColorScheme()
 
+private val LegacyDarkColors =
+    androidx.compose.material.darkColors(
+        primary = DarkColorScheme.primary,
+        primaryVariant = DarkColorScheme.primaryContainer,
+        secondary = DarkColorScheme.secondary,
+        background = DarkColorScheme.background,
+        surface = DarkColorScheme.surface,
+        onPrimary = DarkColorScheme.onPrimary,
+        onSecondary = DarkColorScheme.onSecondary,
+        onBackground = DarkColorScheme.onBackground,
+        onSurface = DarkColorScheme.onSurface,
+    )
+private val LegacyLightColors =
+    androidx.compose.material.lightColors(
+        primary = LightColorScheme.primary,
+        primaryVariant = LightColorScheme.primaryContainer,
+        secondary = LightColorScheme.secondary,
+        background = LightColorScheme.background,
+        surface = LightColorScheme.surface,
+        onPrimary = LightColorScheme.onPrimary,
+        onSecondary = LightColorScheme.onSecondary,
+        onBackground = LightColorScheme.onBackground,
+        onSurface = LightColorScheme.onSurface,
+    )
+
 @Composable
 fun AppTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
@@ -46,5 +70,16 @@ fun AppTheme(
             else -> LightColorScheme
         }
 
-    MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)
+    val legacyColors =
+        when (darkTheme) {
+            true -> LegacyDarkColors
+            false -> LegacyLightColors
+        }
+
+    // Also apply Material 2 theme because the bottom sheet from Compose Destinations uses it. We
+    // can remove this alongside the material 2 library once they add support
+    // https://github.com/raamcosta/compose-destinations/issues/756.
+    androidx.compose.material.MaterialTheme(colors = legacyColors) {
+        MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)
+    }
 }
