Rework Preview for a better rendering in the IDE.

2023-01-27 10:19:17 +01:00 · 2023-01-27 10:19:17 +01:00 · 9d32b05fbb
commit 9d32b05fbb
parent e3fed8b4f5
32 changed files with 452 additions and 73 deletions
--- a/features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt
+++ b/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"),
    )
--- a/features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt
+++ b/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",
--- a/features/logout/src/main/kotlin/io/element/android/features/logout/LogoutPreferenceScreen.kt
+++ b/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())
 }
--- a/features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt
+++ b/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(
--- a/features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemInformativeView.kt
+++ b/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
+    )
+}
--- a/features/onboarding/src/main/kotlin/io/element/android/features/onboarding/OnBoardingScreen.kt
+++ b/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
--- a/features/preferences/src/main/kotlin/io/element/android/features/preferences/root/PreferencesRootView.kt
+++ b/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(),
--- a/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt
+++ b/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(),
    )
--- a/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/crash/ui/CrashDetectionScreen.kt
+++ b/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()
    )
--- a/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/detection/RageshakeDetectionView.kt
+++ b/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()
 }
--- a/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/preferences/RageshakePreferencesView.kt
+++ b/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))
 }
--- a/features/roomlist/src/main/kotlin/io/element/android/features/roomlist/RoomListView.kt
+++ b/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")),
--- a/features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomSummaryRow.kt
+++ b/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,
--- a/features/template/src/main/kotlin/io/element/android/features/template/TemplateView.kt
+++ b/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(),
    )
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ColorUtil.kt
+++ b/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)
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt
+++ b/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,
    )
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/LabelledCheckbox.kt
+++ b/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",
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt
+++ b/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")
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt
+++ b/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"))
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ConfirmationDialog.kt
+++ b/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",
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt
+++ b/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",
    )
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt
+++ b/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()
-        PreferenceSwitchPreview()
-        PreferenceSlidePreview()
+        PreferenceText(
+            title = "Title",
+            icon = Icons.Default.BugReport,
+        )
+        PreferenceSwitch(
+            title = "Switch",
+            icon = Icons.Default.Announcement,
+            isChecked = true
+        )
+        PreferenceSlide(
+            title = "Slide",
+            summary = "Summary",
+            value = 0.75F
+        )
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceScreen.kt
+++ b/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
+            )
+        }
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt
+++ b/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",
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt
+++ b/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
    )
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
+++ b/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,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/ElementPreview.kt
+++ b/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()
+        }
+    }
+}
+
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt
+++ b/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"),
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt
+++ b/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"),
--- a/libraries/textcomposer/build.gradle.kts
+++ b/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")
--- a/libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
+++ b/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,
--- a/tests/uitests/src/main/kotlin/io/element/android/tests/uitests/ShowkaseButton.kt
+++ b/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()
 }