Rework Preview for a better rendering in the IDE.

features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalMaterial3Api::class)
-
 package io.element.android.features.login.changeserver
 
 import androidx.compose.foundation.background
@@ -52,6 +50,8 @@ import io.element.android.features.login.error.changeServerError
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.VectorIcon
 import io.element.android.libraries.designsystem.components.form.textFieldState
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ElementButton
 import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator
@@ -109,6 +109,7 @@ fun ChangeServerView(
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
+                color = ElementTheme.colors.primary,
             )
             Text(
                 text = "A server is a home for all your data.\n" +
@@ -119,7 +120,7 @@ fun ChangeServerView(
                     .padding(top = 16.dp),
                 textAlign = TextAlign.Center,
                 fontSize = 16.sp,
-                color = ElementTheme.colors.secondary
+                color = ElementTheme.colors.secondary,
             )
             var homeserverFieldState by textFieldState(stateValue = state.homeserver)
             ElementOutlinedTextField(
@@ -177,9 +178,16 @@ fun ChangeServerView(
     }
 }
 
-@Composable
 @Preview
-fun ChangeServerContentPreview() {
+@Composable
+fun ChangeServerViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ChangeServerViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     ChangeServerView(
         state = ChangeServerState(homeserver = "matrix.org"),
     )

features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalMaterial3Api::class)
-
 package io.element.android.features.login.root
 
 import androidx.compose.foundation.layout.Box
@@ -55,6 +53,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.features.login.error.loginError
 import io.element.android.libraries.designsystem.components.form.textFieldState
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ElementButton
 import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator
@@ -99,6 +99,7 @@ fun LoginRootScreen(
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
+                color = ElementTheme.colors.primary,
             )
             // Form
             Column(
@@ -219,9 +220,16 @@ fun LoginRootScreen(
     }
 }
 
-@Composable
 @Preview
-fun LoginContentPreview() {
+@Composable
+fun LoginRootScreenLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun LoginRootScreenDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     LoginRootScreen(
         state = LoginRootState(
             homeserver = "matrix.org",

features/logout/src/main/kotlin/io/element/android/features/logout/LogoutPreferenceScreen.kt

@@ -29,6 +29,8 @@ import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceText
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.ui.strings.R as StringR
 
 @Composable
@@ -88,8 +90,15 @@ fun LogoutPreferenceContent(
     }
 }
 
-@Composable
 @Preview
-fun LogoutContentPreview() {
+@Composable
+fun LogoutPreferenceViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun LogoutPreferenceViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     LogoutPreferenceView(LogoutPreferenceState())
 }

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt

@@ -77,6 +77,8 @@ import io.element.android.features.messages.timeline.model.content.TimelineItemT
 import io.element.android.features.messages.timeline.model.content.TimelineItemUnknownContent
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator
 import io.element.android.libraries.designsystem.utils.PairCombinedPreviewParameter
@@ -355,13 +357,20 @@ class MessagesItemGroupPositionToMessagesTimelineItemContentProvider :
         TimelineItemGroupPositionProvider() to MessagesTimelineItemContentProvider()
     )
 
-@Suppress("PreviewPublic")
 @Preview
 @Composable
-fun TimelineItemsPreview(
-    @PreviewParameter(MessagesTimelineItemContentProvider::class)
-    content: TimelineItemContent
-) {
+fun LoginRootScreenLightPreview(
+    @PreviewParameter(MessagesTimelineItemContentProvider::class) content: TimelineItemContent
+) = ElementPreviewLight { ContentToPreview(content) }
+
+@Preview
+@Composable
+fun LoginRootScreenDarkPreview(
+    @PreviewParameter(MessagesTimelineItemContentProvider::class) content: TimelineItemContent
+) = ElementPreviewDark { ContentToPreview(content) }
+
+@Composable
+private fun ContentToPreview(content: TimelineItemContent) {
     val timelineItems = persistentListOf(
         // 3 items (First Middle Last) with isMine = false
         createMessageEvent(

features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemInformativeView.kt

@@ -20,6 +20,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,8 +29,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
@@ -57,3 +62,20 @@ fun TimelineItemInformativeView(
         )
     }
 }
+
+@Preview
+@Composable
+fun MatrixUserRowLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun MatrixUserRowDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    TimelineItemInformativeView(
+        text = "Info",
+        iconDescription = "",
+        icon = Icons.Default.Delete
+    )
+}

features/onboarding/src/main/kotlin/io/element/android/features/onboarding/OnBoardingScreen.kt

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalMaterial3Api::class)
-
 package io.element.android.features.onboarding
 
 import androidx.compose.foundation.Image

features/preferences/src/main/kotlin/io/element/android/features/preferences/root/PreferencesRootView.kt

@@ -27,6 +27,8 @@ import io.element.android.features.rageshake.preferences.RageshakePreferencesSta
 import io.element.android.features.rageshake.preferences.RageshakePreferencesView
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.preferences.PreferenceView
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.ui.strings.R as StringR
 
 @Composable
@@ -56,7 +58,14 @@ fun PreferencesRootView(
 
 @Preview
 @Composable
-fun PreferencesContentPreview() {
+fun PreferencesRootViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PreferencesRootViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     val state = PreferencesRootState(
         logoutState = LogoutPreferenceState(),
         rageshakeState = RageshakePreferencesState(),

features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt

@@ -48,6 +48,9 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.LabelledCheckbox
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ElementButton
 import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.ElementOutlinedTextField
@@ -94,6 +97,7 @@ fun BugReportView(
                 textAlign = TextAlign.Center,
                 fontWeight = FontWeight.Bold,
                 fontSize = 24.sp,
+                color = ElementTheme.colors.primary,
             )
             // Form
             Text(
@@ -102,7 +106,8 @@ fun BugReportView(
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp, vertical = 16.dp),
                 fontSize = 16.sp,
-            )
+                color = ElementTheme.colors.primary,
+                )
             var descriptionFieldState by textFieldState(
                 stateValue = state.formState.description
             )
@@ -202,9 +207,16 @@ fun BugReportView(
     }
 }
 
-@Composable
 @Preview
-fun BugReportContentPreview() {
+@Composable
+fun BugReportViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun BugReportViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     BugReportView(
         state = BugReportState(),
     )

features/rageshake/src/main/kotlin/io/element/android/features/rageshake/crash/ui/CrashDetectionScreen.kt

@@ -20,6 +20,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.ui.strings.R as StringR
 
@@ -67,7 +69,14 @@ fun CrashDetectionContent(
 
 @Preview
 @Composable
-fun CrashDetectionContentPreview() {
+fun CrashDetectionContentLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun CrashDetectionContentDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     CrashDetectionContent(
         state = CrashDetectionState()
     )

features/rageshake/src/main/kotlin/io/element/android/features/rageshake/detection/RageshakeDetectionView.kt

@@ -27,6 +27,8 @@ import io.element.android.features.rageshake.screenshot.ImageResult
 import io.element.android.features.rageshake.screenshot.screenshot
 import io.element.android.libraries.androidutils.hardware.vibrate
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.designsystem.utils.OnLifecycleEvent
 import io.element.android.libraries.ui.strings.R as StringR
@@ -99,6 +101,13 @@ fun RageshakeDialogContent(
 
 @Preview
 @Composable
-fun RageshakeDialogContentPreview() {
+fun RageshakeDialogContentLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun RageshakeDialogContentDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     RageshakeDialogContent()
 }

features/rageshake/src/main/kotlin/io/element/android/features/rageshake/preferences/RageshakePreferencesView.kt

@@ -27,6 +27,8 @@ import io.element.android.libraries.designsystem.components.preferences.Preferen
 import io.element.android.libraries.designsystem.components.preferences.PreferenceSlide
 import io.element.android.libraries.designsystem.components.preferences.PreferenceSwitch
 import io.element.android.libraries.designsystem.components.preferences.PreferenceText
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.ui.strings.R as StringR
 
 @Composable
@@ -73,14 +75,28 @@ fun RageshakePreferencesView(
     }
 }
 
-@Composable
 @Preview
-fun RageshakePreferencesViewPreview() {
+@Composable
+fun RageshakePreferencesViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun RageshakePreferencesViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     RageshakePreferencesView(RageshakePreferencesState(isEnabled = true, isSupported = true, sensitivity = 0.5f))
 }
 
-@Composable
 @Preview
-fun RageshakePreferenceNotSupportedPreview() {
+@Composable
+fun RageshakePreferencesViewNotSupportedLightPreview() = ElementPreviewLight { ContentNotSupportedToPreview() }
+
+@Preview
+@Composable
+fun RageshakePreferencesViewNotSupportedDarkPreview() = ElementPreviewDark { ContentNotSupportedToPreview() }
+
+@Composable
+private fun ContentNotSupportedToPreview() {
     RageshakePreferencesView(RageshakePreferencesState(isEnabled = true, isSupported = false, sensitivity = 0.5f))
 }

features/roomlist/src/main/kotlin/io/element/android/features/roomlist/RoomListView.kt

@@ -42,6 +42,8 @@ import io.element.android.features.roomlist.model.RoomListRoomSummary
 import io.element.android.features.roomlist.model.RoomListState
 import io.element.android.features.roomlist.model.stubbedRoomSummaries
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.ElementScaffold
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.matrix.core.RoomId
@@ -156,7 +158,14 @@ private fun RoomListRoomSummary.contentType() = isPlaceholder
 
 @Preview
 @Composable
-fun RoomListViewPreview() {
+fun RoomListViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun RoomListViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     RoomListView(
         roomSummaries = stubbedRoomSummaries(),
         matrixUser = MatrixUser(id = UserId("@id"), username = "User#1", avatarData = AvatarData("U")),

features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomSummaryRow.kt

@@ -115,10 +115,10 @@ internal fun DefaultRoomSummaryRow(
             // Name
             Text(
                 modifier = Modifier.placeholder(
-                        visible = room.isPlaceholder,
-                        shape = TextPlaceholderShape,
-                        color = ElementTheme.colors.roomListPlaceHolder,
-                    ),
+                    visible = room.isPlaceholder,
+                    shape = TextPlaceholderShape,
+                    color = ElementTheme.colors.roomListPlaceHolder,
+                ),
                 fontSize = 16.sp,
                 fontWeight = FontWeight.SemiBold,
                 text = room.name,
@@ -146,7 +146,11 @@ internal fun DefaultRoomSummaryRow(
                 .alignByBaseline(),
         ) {
             Text(
-                modifier = Modifier.placeholder(room.isPlaceholder, shape = TextPlaceholderShape),
+                modifier = Modifier.placeholder(
+                    visible = room.isPlaceholder,
+                    shape = TextPlaceholderShape,
+                    color = ElementTheme.colors.roomListPlaceHolder,
+                ),
                 fontSize = 12.sp,
                 text = room.timestamp ?: "",
                 color = ElementTheme.colors.roomListRoomMessageDate,

features/template/src/main/kotlin/io/element/android/features/template/TemplateView.kt

@@ -22,6 +22,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun TemplateView(
@@ -29,13 +32,23 @@ fun TemplateView(
     modifier: Modifier = Modifier,
 ) {
     Box(modifier, contentAlignment = Alignment.Center) {
-        Text("Template feature view")
+        Text(
+            "Template feature view",
+            color = ElementTheme.colors.primary,
+        )
     }
 }
 
-@Composable
 @Preview
-fun TemplateViewPreview() {
+@Composable
+fun TemplateViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun TemplateViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     TemplateView(
         state = TemplateState(),
     )