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(
+fun LoginRootScreenLightPreview(
-    @PreviewParameter(MessagesTimelineItemContentProvider::class)
+    @PreviewParameter(MessagesTimelineItemContentProvider::class) content: TimelineItemContent
-    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,
+                    visible = room.isPlaceholder,
-                        shape = TextPlaceholderShape,
+                    shape = TextPlaceholderShape,
-                        color = ElementTheme.colors.roomListPlaceHolder,
+                    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(),
     )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ColorUtil.kt

@@ -25,6 +25,6 @@ fun Boolean.toEnabledColor(): Color {
     return if (this) {
         ElementTheme.colors.primary
     } else {
-        ElementTheme.colors.secondary
+        ElementTheme.colors.primary.copy(alpha = 0.40f)
     }
 }

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

@@ -32,6 +32,7 @@ import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import kotlinx.collections.immutable.ImmutableMap
 import kotlinx.collections.immutable.persistentMapOf
 
@@ -83,6 +84,7 @@ fun ClickableLinkText(
         onTextLayout = {
             layoutResult.value = it
         },
-        inlineContent = inlineContent
+        inlineContent = inlineContent,
+        color = ElementTheme.colors.primary,
     )
 }

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

@@ -23,6 +23,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
 import io.element.android.libraries.designsystem.theme.components.ElementCheckbox
 
 @Composable
@@ -42,13 +45,23 @@ fun LabelledCheckbox(
             onCheckedChange = onCheckedChange,
             enabled = enabled,
         )
-        Text(text = text)
+        Text(
+            text = text,
+            color = ElementTheme.colors.primary,
+        )
     }
 }
 
 @Preview
 @Composable
-fun LabelledCheckboxPreview() {
+fun LabelledCheckboxLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun LabelledCheckboxDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     LabelledCheckbox(
         checked = true,
         text = "Some text",

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

@@ -30,6 +30,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
+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
 
@@ -69,8 +71,15 @@ fun ProgressDialog(
     }
 }
 
-@Composable
 @Preview
-fun ProgressDialogPreview() {
+@Composable
+fun ProgressDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ProgressDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     ProgressDialog(text = "test dialog content")
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt

@@ -34,6 +34,8 @@ import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import io.element.android.libraries.designsystem.AvatarGradientEnd
 import io.element.android.libraries.designsystem.AvatarGradientStart
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import timber.log.Timber
 
 @Composable
@@ -97,6 +99,13 @@ private fun InitialsAvatar(
 
 @Preview
 @Composable
-fun InitialsAvatarPreview() {
+fun AvatarLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun AvatarDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     Avatar(AvatarData(name = "A"))
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ConfirmationDialog.kt

@@ -32,6 +32,8 @@ import androidx.compose.ui.res.stringResource
 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.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ElementButton
 import io.element.android.libraries.ui.strings.R as StringR
@@ -113,9 +115,16 @@ fun ConfirmationDialog(
     )
 }
 
-@Composable
 @Preview
-fun ConfirmationDialogPreview() {
+@Composable
+fun ConfirmationDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ConfirmationDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     ConfirmationDialog(
         title = "Title",
         content = "Content",

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt

@@ -31,6 +31,8 @@ import androidx.compose.ui.res.stringResource
 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.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.ElementButton
 import io.element.android.libraries.ui.strings.R as StringR
@@ -82,9 +84,16 @@ fun ErrorDialog(
     )
 }
 
-@Composable
 @Preview
-fun ErrorDialogPreview() {
+@Composable
+fun ErrorDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ErrorDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     ErrorDialog(
         content = "Content",
     )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt

@@ -20,12 +20,17 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Announcement
+import androidx.compose.material.icons.filled.BugReport
 import androidx.compose.material3.Divider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 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.theme.ElementTheme
 
 @Composable
@@ -52,14 +57,32 @@ fun PreferenceCategory(
     }
 }
 
-@Composable
 @Preview
-fun PreferenceCategoryPreview() {
+@Composable
+fun PreferenceCategoryLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PreferenceCategoryDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     PreferenceCategory(
         title = "Category title",
     ) {
-        PreferenceTextPreview()
+        PreferenceText(
-        PreferenceSwitchPreview()
+            title = "Title",
-        PreferenceSlidePreview()
+            icon = Icons.Default.BugReport,
+        )
+        PreferenceSwitch(
+            title = "Switch",
+            icon = Icons.Default.Announcement,
+            isChecked = true
+        )
+        PreferenceSlide(
+            title = "Slide",
+            summary = "Summary",
+            value = 0.75F
+        )
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceScreen.kt

@@ -28,7 +28,9 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Announcement
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.BugReport
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -40,6 +42,8 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 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.components.ElementScaffold
 import io.element.android.libraries.designsystem.theme.components.ElementTopAppBar
 
@@ -110,12 +114,36 @@ fun PreferenceTopAppBar(
     )
 }
 
-@Composable
 @Preview
-fun PreferenceScreenPreview() {
+@Composable
+fun PreferenceViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PreferenceViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     PreferenceView(
         title = "Preference screen"
     ) {
-        PreferenceCategoryPreview()
+        PreferenceCategory(
+            title = "Category title",
+        ) {
+            PreferenceText(
+                title = "Title",
+                icon = Icons.Default.BugReport,
+            )
+            PreferenceSwitch(
+                title = "Switch",
+                icon = Icons.Default.Announcement,
+                isChecked = true
+            )
+            PreferenceSlide(
+                title = "Slide",
+                summary = "Summary",
+                value = 0.75F
+            )
+        }
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt

@@ -30,6 +30,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
+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.ElementSlider
 import io.element.android.libraries.designsystem.toEnabledColor
@@ -84,9 +86,16 @@ fun PreferenceSlide(
     }
 }
 
-@Composable
 @Preview
-fun PreferenceSlidePreview() {
+@Composable
+fun PreferenceSlideLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PreferenceSlideDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     PreferenceSlide(
         title = "Slide",
         summary = "Summary",

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt

@@ -31,6 +31,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
+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.ElementCheckbox
 import io.element.android.libraries.designsystem.toEnabledColor
@@ -75,12 +77,20 @@ fun PreferenceSwitch(
     }
 }
 
-@Composable
 @Preview
-fun PreferenceSwitchPreview() {
+@Composable
+fun PreferenceSwitchLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PreferenceSwitchDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     PreferenceSwitch(
         title = "Switch",
         icon = Icons.Default.Announcement,
+        enabled = true,
         isChecked = true
     )
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt

@@ -31,6 +31,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
+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,15 +59,23 @@ fun PreferenceText(
                     .weight(1f)
                     .padding(end = preferencePaddingEnd),
                 style = ElementTheme.typography.bodyLarge,
-                text = title
+                text = title,
+                color = ElementTheme.colors.primary,
             )
         }
     }
 }
 
-@Composable
 @Preview
-fun PreferenceTextPreview() {
+@Composable
+fun PreferenceTextLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PreferenceTextDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     PreferenceText(
         title = "Title",
         icon = Icons.Default.BugReport,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/ElementPreview.kt

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.preview
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import io.element.android.libraries.designsystem.theme.ElementTheme
+
+@Composable
+fun ElementPreviewLight(
+    showBackground: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    ElementPreview(
+        darkTheme = false,
+        showBackground = showBackground,
+        content = content
+    )
+}
+
+@Composable
+fun ElementPreviewDark(
+    showBackground: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    ElementPreview(
+        darkTheme = true,
+        showBackground = showBackground,
+        content = content
+    )
+}
+
+@Composable
+private fun ElementPreview(
+    darkTheme: Boolean,
+    showBackground: Boolean,
+    content: @Composable () -> Unit
+) {
+    ElementTheme(darkTheme = darkTheme) {
+        if (showBackground) {
+            Box(modifier = Modifier.background(ElementTheme.colors.background)) {
+                content()
+            }
+        } else {
+            content()
+        }
+    }
+}
+

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt

@@ -35,6 +35,8 @@ import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+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.matrix.core.UserId
 import io.element.android.libraries.matrix.ui.model.MatrixUser
@@ -64,8 +66,9 @@ fun MatrixUserHeader(
             fontWeight = FontWeight.SemiBold,
             text = matrixUser.getBestName(),
             maxLines = 1,
-            overflow = TextOverflow.Ellipsis
+            overflow = TextOverflow.Ellipsis,
-        )
+            color = ElementTheme.colors.primary,
+            )
         // Id
         if (matrixUser.username.isNullOrEmpty().not()) {
             Spacer(modifier = Modifier.height(4.dp))
@@ -82,7 +85,14 @@ fun MatrixUserHeader(
 
 @Preview
 @Composable
-fun MatrixUserHeaderPreview() {
+fun MatrixUserHeaderLightPreview() = ElementPreviewLight { ContentToPreview1() }
+
+@Preview
+@Composable
+fun MatrixUserHeaderDarkPreview() = ElementPreviewDark { ContentToPreview1() }
+
+@Composable
+private fun ContentToPreview1() {
     MatrixUserHeader(
         MatrixUser(
             id = UserId("@alice:server.org"),
@@ -94,7 +104,14 @@ fun MatrixUserHeaderPreview() {
 
 @Preview
 @Composable
-fun MatrixUserHeaderNoUsernamePreview() {
+fun MatrixUserHeaderNoUserNameLightPreview() = ElementPreviewLight { ContentToPreview2() }
+
+@Preview
+@Composable
+fun MatrixUserHeaderNoUserNameDarkPreview() = ElementPreviewDark { ContentToPreview2() }
+
+@Composable
+private fun ContentToPreview2() {
     MatrixUserHeader(
         MatrixUser(
             id = UserId("@alice:server.org"),

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt

@@ -34,6 +34,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 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.matrix.core.UserId
 import io.element.android.libraries.matrix.ui.model.MatrixUser
@@ -68,7 +70,8 @@ fun MatrixUserRow(
                 fontWeight = FontWeight.SemiBold,
                 text = matrixUser.getBestName(),
                 maxLines = 1,
-                overflow = TextOverflow.Ellipsis
+                overflow = TextOverflow.Ellipsis,
+                color = ElementTheme.colors.primary,
             )
             // Id
             if (matrixUser.username.isNullOrEmpty().not()) {
@@ -86,7 +89,14 @@ fun MatrixUserRow(
 
 @Preview
 @Composable
-fun MatrixUserRowPreview() {
+fun MatrixUserRowLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun MatrixUserRowDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     MatrixUserRow(
         MatrixUser(
             id = UserId("@alice:server.org"),

libraries/textcomposer/build.gradle.kts

@@ -35,6 +35,7 @@ dependencies {
     implementation(projects.libraries.androidutils)
     implementation(projects.libraries.core)
     implementation(projects.libraries.matrix)
+    implementation(projects.libraries.designsystem)
     implementation(libs.wysiwyg)
     implementation(libs.androidx.constraintlayout)
     implementation("com.google.android.material:material:1.7.0")

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -33,6 +33,9 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.view.isInvisible
 import androidx.core.view.isVisible
+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.ui.strings.R as StringR
 
 @Composable
@@ -123,7 +126,8 @@ private fun FakeComposer(
                 .align(Alignment.Center),
             textAlign = TextAlign.Center,
             text = "Composer Preview",
-            fontSize = 20.sp
+            fontSize = 20.sp,
+            color = ElementTheme.colors.secondary,
         )
     }
 }
@@ -145,7 +149,14 @@ private fun MessageComposerView.setup(isDarkMode: Boolean, composerMode: Message
 
 @Preview
 @Composable
-fun TextComposerPreview() {
+fun TextComposerLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun TextComposerDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     TextComposer(
         onSendMessage = {},
         fullscreen = false,

tests/uitests/src/main/kotlin/io/element/android/tests/uitests/ShowkaseButton.kt

@@ -31,6 +31,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 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.theme.components.ElementButton
 
 @Composable
@@ -59,8 +61,15 @@ fun ShowkaseButton(
     }
 }
 
-@Preview(group = "Buttons", name = "Showkase button")
+@Preview
 @Composable
-fun ShowkaseButtonPreview() {
+fun ShowkaseButtonLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ShowkaseButtonDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
     ShowkaseButton()
 }