Auto generate dark mode previews and screenshots (#776)

With this change, composable previews and screenshots should be created with just:
```
@ElementPreviews
@Composable
fun MyViewPreview() {
    ElementPreview { 
        MyView()
    }
}
```

- Adds `@ElementPreviews` which is a shorthand for:
```
@Preview(name = "D")
@Preview(name = "N", uiMode = Configuration.UI_MODE_NIGHT_YES)
```
Should be used in connection with the now public `fun ElementPreview()` composable.

- Adds ElementPreviews to previewAnnotations in dangerfile
- Screenshots of night mode previews are now rendered with night mode
- Replaces `ElementPreviewLight` and `ElementThemedPreview` with `ElementPreview`
- Deprecates `ElementPreviewDark` which should be removed.
- Remaining usages of `ElementPreviewDark` are now ignored during screenshot tests

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/PlaceholderAtom.kt

@@ -24,11 +24,11 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.roomListPlaceholder
 import io.element.android.libraries.theme.ElementTheme
 
@@ -50,12 +50,13 @@ fun PlaceholderAtom(
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun PlaceholderAtomLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun PlaceholderAtomLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun PlaceholderAtomDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.theme.ElementTheme
 
@@ -96,12 +96,13 @@ private fun RoundedIconAtomSize.toIconSize(): Dp {
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun RoundedIconAtomLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun RoundedIconAtomLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun RoundedIconAtomDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/UnreadIndicatorAtom.kt

@@ -24,11 +24,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.unreadIndicator
 import io.element.android.libraries.theme.ElementTheme
 
@@ -47,12 +47,13 @@ fun UnreadIndicatorAtom(
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun UnreadIndicatorAtomLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun UnreadIndicatorAtomLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun UnreadIndicatorAtomDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ButtonColumnMolecule.kt

@@ -23,10 +23,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 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.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
@@ -46,12 +46,13 @@ fun ButtonColumnMolecule(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun ButtonColumnMoleculeLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun ButtonColumnMoleculeLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun ButtonColumnMoleculeDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ButtonRowMolecule.kt

@@ -22,9 +22,9 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
 
@@ -41,12 +41,13 @@ fun ButtonRowMolecule(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun ButtonRowMoleculeLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun ButtonRowMoleculeLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun ButtonRowMoleculeDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt

@@ -27,14 +27,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.R
 import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
 import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Text
 
 /**
@@ -85,12 +85,13 @@ fun IconTitleSubtitleMolecule(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun IconTitleSubtitleMoleculeLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun IconTitleSubtitleMoleculeLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun IconTitleSubtitleMoleculeDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/HeaderFooterPage.kt

@@ -25,10 +25,10 @@ import androidx.compose.foundation.layout.systemBarsPadding
 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.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 
@@ -66,12 +66,13 @@ fun HeaderFooterPage(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun HeaderFooterPageLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun HeaderFooterPageLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun HeaderFooterPageDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt

@@ -28,11 +28,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.R
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 
@@ -89,12 +89,13 @@ fun OnBoardingPage(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun OnBoardingPageLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun OnBoardingPageLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun OnBoardingPageDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

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

@@ -34,8 +34,8 @@ import androidx.compose.ui.text.ExperimentalTextApi
 import androidx.compose.ui.text.ParagraphStyle
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
 import kotlinx.collections.immutable.ImmutableMap
@@ -97,10 +97,11 @@ fun ClickableLinkText(
     )
 }
 
-@Preview(group = PreviewGroup.Text)
+@ElementPreviews(group = PreviewGroup.Text)
 @Composable
-internal fun ClickableLinkTextPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun ClickableLinkTextPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -22,8 +22,8 @@ import androidx.compose.material3.MaterialTheme
 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.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Checkbox
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -52,9 +52,11 @@ fun LabelledCheckbox(
     }
 }
 
-@Preview(group = PreviewGroup.Toggles)
+@ElementPreviews(group = PreviewGroup.Toggles)
 @Composable
-internal fun LabelledCheckboxPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun LabelledCheckboxPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -24,10 +24,10 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextField
 
@@ -64,11 +64,13 @@ fun LabelledTextField(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-fun LabelledTextFieldLightPreview() = ElementPreviewLight { ContentToPreview() }
+fun LabelledTextFieldLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 fun LabelledTextFieldDarkPreview() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -23,11 +23,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.R
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.theme.ElementTheme
 
@@ -50,12 +50,13 @@ fun PinIcon(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-fun PinIconLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+fun PinIconLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 fun PinIconDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

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

@@ -28,12 +28,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
 import io.element.android.libraries.designsystem.components.dialogs.DialogPreview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -111,9 +111,11 @@ private fun ProgressDialogContent(
     }
 }
 
-@Preview(group = PreviewGroup.Dialogs)
+@ElementPreviews(group = PreviewGroup.Dialogs)
 @Composable
-internal fun ProgressDialogPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun ProgressDialogPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -25,10 +25,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -55,11 +55,13 @@ fun AsyncFailure(
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun AsyncFailurePreviewLight() = ElementPreviewLight { ContentToPreview() }
+internal fun AsyncFailurePreviewLight() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun AsyncFailurePreviewDark() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -22,10 +22,10 @@ import androidx.compose.foundation.layout.height
 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.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 
 @Composable
@@ -40,11 +40,13 @@ fun AsyncLoading(modifier: Modifier = Modifier) {
     }
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun AsyncLoadingPreviewLight() = ElementPreviewLight { ContentToPreview() }
+internal fun AsyncLoadingPreviewLight() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun AsyncLoadingPreviewDark() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -28,11 +28,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.preview.debugPlaceholderAvatar
 import io.element.android.libraries.designsystem.text.toSp
@@ -100,10 +100,10 @@ private fun InitialsAvatar(
     }
 }
 
-@Preview(group = PreviewGroup.Avatars)
+@ElementPreviews(group = PreviewGroup.Avatars)
 @Composable
-fun AvatarPreview(@PreviewParameter(AvatarDataProvider::class) avatarData: AvatarData) =
-    ElementThemedPreview {
+fun AvatarPreview(@PreviewParameter(AvatarDataProvider::class) avatarData: AvatarData) {
+    ElementPreview {
         Row(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(16.dp)
@@ -112,3 +112,4 @@ fun AvatarPreview(@PreviewParameter(AvatarDataProvider::class) avatarData: Avata
             Text(text = avatarData.size.name + " " + avatarData.size.dp)
         }
     }
+}

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

@@ -23,8 +23,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
@@ -47,11 +47,13 @@ fun BackButton(
     }
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
-internal fun BackButtonPreview() = ElementThemedPreview {
-    Column {
-        BackButton(onClick = { }, enabled = true, contentDescription = "Back")
-        BackButton(onClick = { }, enabled = false, contentDescription = "Back")
+internal fun BackButtonPreview() {
+    ElementPreview {
+        Column {
+            BackButton(onClick = { }, enabled = true, contentDescription = "Back")
+            BackButton(onClick = { }, enabled = false, contentDescription = "Back")
+        }
     }
 }

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

@@ -30,10 +30,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.ElementTextStyles
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
@@ -93,12 +93,14 @@ fun ButtonWithProgress(
     }
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
-internal fun ButtonWithProgressPreview() = ElementThemedPreview {
-    ButtonWithProgress(
-        text = "Button with progress",
-        onClick = {},
-        showProgress = true,
-    )
+internal fun ButtonWithProgressPreview() {
+    ElementPreview {
+        ButtonWithProgress(
+            text = "Button with progress",
+            onClick = {},
+            showProgress = true,
+        )
+    }
 }

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

@@ -34,10 +34,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.ElementTextStyles
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -77,10 +77,10 @@ fun MainActionButton(
     }
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
 internal fun MainActionButtonPreview() {
-    ElementThemedPreview {
+    ElementPreview {
         ContentsToPreview()
     }
 }

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

@@ -25,10 +25,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.utils.BooleanProvider
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -117,10 +117,10 @@ private fun ConfirmationDialogContent(
     )
 }
 
-@Preview(group = PreviewGroup.Dialogs)
+@ElementPreviews(group = PreviewGroup.Dialogs)
 @Composable
-internal fun ConfirmationDialogPreview(@PreviewParameter(BooleanProvider::class) emphasizeSubmitButton: Boolean) =
-    ElementThemedPreview {
+internal fun ConfirmationDialogPreview(@PreviewParameter(BooleanProvider::class) emphasizeSubmitButton: Boolean) {
+    ElementPreview {
         DialogPreview {
             ConfirmationDialogContent(
                 content = "Content",
@@ -134,3 +134,4 @@ internal fun ConfirmationDialogPreview(@PreviewParameter(BooleanProvider::class)
             )
         }
     }
+}

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

@@ -24,9 +24,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.ui.strings.CommonStrings
 
@@ -95,10 +95,10 @@ object ErrorDialogDefaults {
     val submitText: String @Composable get() = stringResource(id = CommonStrings.action_ok)
 }
 
-@Preview(group = PreviewGroup.Dialogs)
+@ElementPreviews(group = PreviewGroup.Dialogs)
 @Composable
 internal fun ErrorDialogPreview() {
-    ElementThemedPreview {
+    ElementPreview {
         DialogPreview {
             ErrorDialogContent(
                 content = "Content",

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

@@ -24,9 +24,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -114,9 +114,11 @@ object RetryDialogDefaults {
     val dismissText: String @Composable get() = stringResource(id = CommonStrings.action_cancel)
 }
 
-@Preview(group = PreviewGroup.Dialogs)
+@ElementPreviews(group = PreviewGroup.Dialogs)
 @Composable
-internal fun RetryDialogPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun RetryDialogPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -25,9 +25,9 @@ import androidx.compose.material.icons.filled.Announcement
 import androidx.compose.material.icons.filled.BugReport
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
@@ -68,9 +68,11 @@ fun PreferenceCategoryTitle(title: String, modifier: Modifier = Modifier) {
     )
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceCategoryPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceCategoryPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -27,10 +27,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 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.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Checkbox
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -77,9 +77,11 @@ fun PreferenceCheckbox(
     }
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceCheckboxPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceCheckboxPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -18,8 +18,8 @@ package io.element.android.libraries.designsystem.components.preferences
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.theme.ElementTheme
@@ -34,9 +34,11 @@ fun PreferenceDivider(
     )
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceDividerPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceDividerPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -24,8 +24,8 @@ import androidx.compose.foundation.layout.padding
 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.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -48,9 +48,11 @@ fun PreferenceRow(
     }
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceRowPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceRowPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -35,10 +35,10 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -101,11 +101,13 @@ fun PreferenceTopAppBar(
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun PreferenceViewLightPreview() = ElementPreviewLight { ContentToPreview() }
+internal fun PreferenceViewLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun PreferenceViewDarkPreview() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -27,10 +27,10 @@ import androidx.compose.material.icons.filled.Person
 import androidx.compose.runtime.Composable
 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.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Slider
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -83,9 +83,11 @@ fun PreferenceSlide(
     }
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceSlidePreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceSlidePreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -32,10 +32,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 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.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.toEnabledColor
@@ -98,9 +98,11 @@ fun PreferenceSwitch(
     }
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceSwitchPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceSwitchPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -32,10 +32,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -111,9 +111,11 @@ fun PreferenceText(
     }
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceTextPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun PreferenceTextPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -24,10 +24,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.toSecondaryEnabledColor
@@ -54,10 +54,11 @@ fun PreferenceIcon(
     }
 }
 
-@Preview(group = PreviewGroup.Preferences)
+@ElementPreviews(group = PreviewGroup.Preferences)
 @Composable
-internal fun PreferenceIconPreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) =
-    ElementThemedPreview { ContentToPreview(content) }
+internal fun PreferenceIconPreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) {
+    ElementPreview { ContentToPreview(content) }
+}
 
 @Composable
 private fun ContentToPreview(content: ImageVector?) {

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

@@ -16,88 +16,38 @@
 
 package io.element.android.libraries.designsystem.preview
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import android.content.res.Configuration
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import io.element.android.libraries.theme.ElementTheme
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.theme.components.Surface
+import io.element.android.libraries.theme.ElementTheme
 
-@Composable
-fun ElementPreviewLight(
-    showBackground: Boolean = true,
-    content: @Composable () -> Unit
-) {
-    ElementPreview(
-        darkTheme = false,
-        showBackground = showBackground,
-        content = content
-    )
-}
+const val DAY_MODE_NAME = "D"
+const val NIGHT_MODE_NAME = "N"
 
+/**
+ * Generates 2 previews of the composable it is applied to: day and night mode.
+ *
+ * NB: Content should be wrapped into [ElementPreview] to apply proper theming.
+ */
+@Preview(name = DAY_MODE_NAME)
+@Preview(name = NIGHT_MODE_NAME, uiMode = Configuration.UI_MODE_NIGHT_YES)
+annotation class ElementPreviews(
+    val group: String = "",
+    val widthDp: Int = -1,
+    val heightDp: Int = -1,
+)
+
+@Deprecated("Don't use anymore.")
 @Composable
-fun ElementPreviewDark(
-    showBackground: Boolean = true,
-    content: @Composable () -> Unit
-) {
-    ElementPreview(
-        darkTheme = true,
-        showBackground = showBackground,
-        content = content
-    )
-}
+fun ElementPreviewDark(content: @Composable () -> Unit) {}
 
 @Composable
 @Suppress("ModifierMissing")
-fun ElementThemedPreview(
+fun ElementPreview(
+    darkTheme: Boolean = isSystemInDarkTheme(),
     showBackground: Boolean = true,
-    vertical: Boolean = true,
-    content: @Composable () -> Unit,
-) {
-    Box(modifier = Modifier
-        .background(Color.Gray)
-        .padding(4.dp)) {
-        if (vertical) {
-            Column {
-                ElementPreviewLight(
-                    showBackground = showBackground,
-                    content = content,
-                )
-                Spacer(modifier = Modifier.height(4.dp))
-                ElementPreviewDark(
-                    showBackground = showBackground,
-                    content = content
-                )
-            }
-        } else {
-            Row {
-                ElementPreviewLight(
-                    showBackground = showBackground,
-                    content = content,
-                )
-                Spacer(modifier = Modifier.width(4.dp))
-                ElementPreviewDark(
-                    showBackground = showBackground,
-                    content = content
-                )
-            }
-        }
-    }
-}
-
-@Composable
-@Suppress("ModifierMissing")
-private fun ElementPreview(
-    darkTheme: Boolean,
-    showBackground: Boolean,
     content: @Composable () -> Unit
 ) {
     ElementTheme(darkTheme = darkTheme) {
@@ -109,4 +59,3 @@ private fun ElementPreview(
         }
     }
 }
-

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

@@ -16,11 +16,9 @@
 
 package io.element.android.libraries.designsystem.preview
 
-import androidx.compose.ui.tooling.preview.Preview
-
 /**
  * Our Paparazzi tests will check components with non-null `heightDp` and use a custom rendering for them,
  * adding extra vertical space so long scrolling components can be displayed. This is a helper for that functionality.
  */
-@Preview(heightDp = 1000)
+@ElementPreviews(heightDp = 1000)
 annotation class LargeHeightPreview

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ruler/HorizontalRuler.kt

@@ -24,11 +24,11 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 
 /**
  * Horizontal ruler is a debug composable that displays a horizontal ruler.
@@ -65,12 +65,13 @@ private fun HorizontalRulerItem(height: Dp, color: Color) {
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun HorizontalRulerLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun HorizontalRulerLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun HorizontalRulerDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ruler/VerticalRuler.kt

@@ -24,11 +24,11 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 
 /**
  * Vertical ruler is a debug composable that displays a vertical ruler.
@@ -65,12 +65,13 @@ private fun VerticalRulerItem(width: Dp, color: Color) {
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun VerticalRulerLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun VerticalRulerLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun VerticalRulerDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ruler/WithRulers.kt

@@ -19,11 +19,11 @@ package io.element.android.libraries.designsystem.ruler
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.Layout
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
 
@@ -63,12 +63,13 @@ fun WithRulers(
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun WithRulerLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun WithRulerLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun WithRulerDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

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

@@ -19,9 +19,9 @@ package io.element.android.libraries.designsystem.theme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.theme.compound.generated.SemanticColors
 import io.element.android.libraries.theme.previews.ColorListPreview
@@ -65,11 +65,13 @@ val SemanticColors.messageFromOtherBackground
         Color(0xFF26282D)
     }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun ColorAliasesLightPreview() = ElementPreviewLight { ContentToPreview() }
+internal fun ColorAliasesLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview
+@ElementPreviews
 @Composable
 internal fun ColorAliasesDarkPreview() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -28,9 +28,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -71,15 +71,17 @@ object ElementButtonDefaults {
 
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
-internal fun ButtonPreview() = ElementThemedPreview {
-    Column {
-        Button(onClick = {}, enabled = true) {
-            Text(text = "Click me! - Enabled")
-        }
-        Button(onClick = {}, enabled = false) {
-            Text(text = "Click me! - Disabled")
+internal fun ButtonPreview() {
+    ElementPreview {
+        Column {
+            Button(onClick = {}, enabled = true) {
+                Text(text = "Click me! - Enabled")
+            }
+            Button(onClick = {}, enabled = false) {
+                Text(text = "Click me! - Disabled")
+            }
         }
     }
 }

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

@@ -24,8 +24,8 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -50,10 +50,11 @@ fun CenterAlignedTopAppBar(
     )
 }
 
-@Preview(group = PreviewGroup.AppBars)
+@ElementPreviews(group = PreviewGroup.AppBars)
 @Composable
-internal fun CenterAlignedTopAppBarPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun CenterAlignedTopAppBarPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable

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

@@ -23,8 +23,8 @@ import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -46,9 +46,11 @@ fun Checkbox(
     )
 }
 
-@Preview(group = PreviewGroup.Toggles)
+@ElementPreviews(group = PreviewGroup.Toggles)
 @Composable
-internal fun CheckboxesPreview() = ElementThemedPreview(vertical = false) { ContentToPreview() }
+internal fun CheckboxesPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -23,10 +23,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalInspectionMode
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -67,9 +67,11 @@ fun CircularProgressIndicator(
     }
 }
 
-@Preview(group = PreviewGroup.Progress)
+@ElementPreviews(group = PreviewGroup.Progress)
 @Composable
-internal fun CircularProgressIndicatorPreview() = ElementThemedPreview(vertical = false) { ContentToPreview() }
+internal fun CircularProgressIndicatorPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -23,10 +23,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -46,11 +46,13 @@ object ElementDividerDefaults {
     val thickness = 0.5.dp
 }
 
-@Preview(group = PreviewGroup.Dividers)
+@ElementPreviews(group = PreviewGroup.Dividers)
 @Composable
-internal fun DividerPreview() = ElementThemedPreview {
-    Box(Modifier.padding(vertical = 10.dp), contentAlignment = Alignment.Center) {
-        ContentToPreview()
+internal fun DividerPreview() {
+    ElementPreview {
+        Box(Modifier.padding(vertical = 10.dp), contentAlignment = Alignment.Center) {
+            ContentToPreview()
+        }
     }
 }
 

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

@@ -26,8 +26,8 @@ import androidx.compose.material3.MenuItemColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.theme.ElementTheme
 
@@ -69,9 +69,11 @@ fun DropdownMenuItemText(
     )
 }
 
-@Preview(group = PreviewGroup.Menus)
+@ElementPreviews(group = PreviewGroup.Menus)
 @Composable
-internal fun DropdownMenuItemPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun DropdownMenuItemPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -29,9 +29,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -57,10 +57,11 @@ fun FloatingActionButton(
     )
 }
 
-@Preview(group = PreviewGroup.FABs)
+@ElementPreviews(group = PreviewGroup.FABs)
 @Composable
-internal fun FloatingActionButtonPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun FloatingActionButtonPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -26,8 +26,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 /**
@@ -123,10 +123,11 @@ fun Icon(
     )
 }
 
-@Preview(group = PreviewGroup.Icons)
+@ElementPreviews(group = PreviewGroup.Icons)
 @Composable
-internal fun IconImageVectorPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun IconImageVectorPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -24,8 +24,8 @@ import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -46,10 +46,11 @@ fun IconButton(
     )
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
-internal fun IconButtonPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun IconButtonPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -24,8 +24,8 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -50,10 +50,11 @@ fun MediumTopAppBar(
     )
 }
 
-@Preview(group = PreviewGroup.AppBars)
+@ElementPreviews(group = PreviewGroup.AppBars)
 @Composable
-internal fun MediumTopAppBarPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun MediumTopAppBarPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable

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

@@ -32,11 +32,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.theme.ElementTheme
 import kotlinx.coroutines.CoroutineScope
@@ -81,13 +81,14 @@ fun SheetState.hide(coroutineScope: CoroutineScope, then: suspend () -> Unit) {
 }
 
 // This preview and its screenshots are blank, see: https://issuetracker.google.com/issues/283843380
-@Preview(group = PreviewGroup.BottomSheets)
+@ElementPreviews(group = PreviewGroup.BottomSheets)
 @Composable
-internal fun ModalBottomSheetLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun ModalBottomSheetLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 // This preview and its screenshots are blank, see: https://issuetracker.google.com/issues/283843380
-@Preview(group = PreviewGroup.BottomSheets)
+@ElementPreviews(group = PreviewGroup.BottomSheets)
 @Composable
 internal fun ModalBottomSheetDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

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

@@ -40,12 +40,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.modifiers.applyIf
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -95,12 +95,13 @@ fun ModalBottomSheetLayout(
     )
 }
 
-@Preview(group = PreviewGroup.BottomSheets)
+@ElementPreviews(group = PreviewGroup.BottomSheets)
 @Composable
-internal fun ModalBottomSheetLayoutLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun ModalBottomSheetLayoutLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview(group = PreviewGroup.BottomSheets)
+@ElementPreviews(group = PreviewGroup.BottomSheets)
 @Composable
 internal fun ModalBottomSheetLayoutDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

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

@@ -29,9 +29,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -74,9 +74,11 @@ object ElementOutlinedButtonDefaults {
 
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
-internal fun OutlinedButtonsPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun OutlinedButtonsPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -41,10 +41,10 @@ import androidx.compose.ui.input.key.type
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.utils.allBooleans
 import io.element.android.libraries.designsystem.utils.asInt
@@ -157,11 +157,13 @@ fun Modifier.onTabOrEnterKeyFocusNext(focusManager: FocusManager): Modifier = on
     }
 }
 
-@Preview(group = PreviewGroup.TextFields)
+@ElementPreviews(group = PreviewGroup.TextFields)
 @Composable
-internal fun OutlinedTextFieldsPreview() = ElementPreviewLight { ContentToPreview() }
+internal fun OutlinedTextFieldsPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview(group = PreviewGroup.TextFields)
+@ElementPreviews(group = PreviewGroup.TextFields)
 @Composable
 internal fun OutlinedTextFieldsDarkPreview() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -23,8 +23,8 @@ import androidx.compose.material3.RadioButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -46,9 +46,11 @@ fun RadioButton(
     )
 }
 
-@Preview(group = PreviewGroup.Toggles)
+@ElementPreviews(group = PreviewGroup.Toggles)
 @Composable
-internal fun RadioButtonPreview() = ElementThemedPreview(vertical = false) { ContentToPreview() }
+internal fun RadioButtonPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -40,11 +40,11 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.button.BackButton
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -193,71 +193,89 @@ sealed interface SearchBarResultState<in T> {
     data class Results<T>(val results: T) : SearchBarResultState<T>
 }
 
-@Preview(group = PreviewGroup.Search)
+@ElementPreviews(group = PreviewGroup.Search)
 @Composable
-internal fun SearchBarPreviewInactive() = ElementThemedPreview { ContentToPreview() }
-
-@Preview(group = PreviewGroup.Search)
-@Composable
-internal fun SearchBarPreviewActiveEmptyQuery() = ElementThemedPreview {
-    ContentToPreview(
-        query = "",
-        active = true,
-    )
+internal fun SearchBarPreviewInactive() {
+    ElementPreview { ContentToPreview() }
 }
 
-@Preview(group = PreviewGroup.Search)
+@ElementPreviews(group = PreviewGroup.Search)
 @Composable
-internal fun SearchBarPreviewActiveWithQuery() = ElementThemedPreview {
-    ContentToPreview(
-        query = "search term",
-        active = true,
-    )
+internal fun SearchBarPreviewActiveEmptyQuery() {
+    ElementPreview {
+        ContentToPreview(
+            query = "",
+            active = true,
+        )
+    }
 }
 
-@Preview(group = PreviewGroup.Search)
+@ElementPreviews(group = PreviewGroup.Search)
 @Composable
-internal fun SearchBarPreviewActiveWithQueryNoBackButton() = ElementThemedPreview {
-    ContentToPreview(
-        query = "search term",
-        active = true,
-        showBackButton = false,
-    )
+internal fun SearchBarPreviewActiveWithQuery() {
+    ElementPreview {
+        ContentToPreview(
+            query = "search term",
+            active = true,
+        )
+    }
 }
 
-@Preview(group = PreviewGroup.Search)
+@ElementPreviews(group = PreviewGroup.Search)
 @Composable
-internal fun SearchBarPreviewActiveWithNoResults() = ElementThemedPreview {
-    ContentToPreview(
-        query = "search term",
-        active = true,
-        resultState = SearchBarResultState.NoResults(),
-    )
+internal fun SearchBarPreviewActiveWithQueryNoBackButton() {
+    ElementPreview {
+        ContentToPreview(
+            query = "search term",
+            active = true,
+            showBackButton = false,
+        )
+    }
 }
 
-@Preview(group = PreviewGroup.Search)
+@ElementPreviews(group = PreviewGroup.Search)
 @Composable
-internal fun SearchBarPreviewActiveWithContent() = ElementThemedPreview {
-    ContentToPreview(
-        query = "search term",
-        active = true,
-        resultState = SearchBarResultState.Results("result!"),
-        contentPrefix = {
-            Text(text = "Content that goes before the search results", modifier = Modifier
-                .background(color = Color.Red)
-                .fillMaxWidth())
-        },
-        contentSuffix = {
-            Text(text = "Content that goes after the search results", modifier = Modifier
-                .background(color = Color.Blue)
-                .fillMaxWidth())
-        },
-        resultHandler = {
-            Text(text = "Results go here", modifier = Modifier
-                .background(color = Color.Green)
-                .fillMaxWidth())
-        }
-    )
+internal fun SearchBarPreviewActiveWithNoResults() {
+    ElementPreview {
+        ContentToPreview(
+            query = "search term",
+            active = true,
+            resultState = SearchBarResultState.NoResults(),
+        )
+    }
+}
+
+@ElementPreviews(group = PreviewGroup.Search)
+@Composable
+internal fun SearchBarPreviewActiveWithContent() {
+    ElementPreview {
+        ContentToPreview(
+            query = "search term",
+            active = true,
+            resultState = SearchBarResultState.Results("result!"),
+            contentPrefix = {
+                Text(
+                    text = "Content that goes before the search results", modifier = Modifier
+                    .background(color = Color.Red)
+                    .fillMaxWidth()
+                )
+            },
+            contentSuffix = {
+                Text(
+                    text = "Content that goes after the search results", modifier = Modifier
+                    .background(color = Color.Blue)
+                    .fillMaxWidth()
+                )
+            },
+            resultHandler = {
+                Text(
+                    text = "Results go here", modifier = Modifier
+                    .background(color = Color.Green)
+                    .fillMaxWidth()
+                )
+            }
+        )
+    }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)

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

@@ -26,8 +26,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -56,9 +56,11 @@ fun Slider(
     )
 }
 
-@Preview(group = PreviewGroup.Sliders)
+@ElementPreviews(group = PreviewGroup.Sliders)
 @Composable
-internal fun SlidersPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun SlidersPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -26,10 +26,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 
 @Composable
 fun Surface(
@@ -54,10 +54,11 @@ fun Surface(
     )
 }
 
-@Preview
+@ElementPreviews
 @Composable
-internal fun SurfacePreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun SurfacePreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -41,11 +41,11 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.theme.utils.toHrf
 import kotlinx.collections.immutable.ImmutableMap
@@ -145,11 +145,13 @@ fun Text(
     )
 }
 
-@Preview(group = PreviewGroup.Text)
+@ElementPreviews(group = PreviewGroup.Text)
 @Composable
-internal fun TextLightPreview() = ElementPreviewLight { ContentToPreview() }
+internal fun TextLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview(group = PreviewGroup.Text)
+@ElementPreviews(group = PreviewGroup.Text)
 @Composable
 internal fun TextDarkPreview() = ElementPreviewDark { ContentToPreview() }
 

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

@@ -28,8 +28,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
@@ -59,9 +59,11 @@ fun TextButton(
     )
 }
 
-@Preview(group = PreviewGroup.Buttons)
+@ElementPreviews(group = PreviewGroup.Buttons)
 @Composable
-internal fun TextButtonPreview() = ElementThemedPreview { ContentToPreview() }
+internal fun TextButtonPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @Composable
 private fun ContentToPreview() {

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

@@ -42,10 +42,10 @@ import androidx.compose.ui.platform.LocalAutofillTree
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.utils.allBooleans
 import io.element.android.libraries.designsystem.utils.asInt
@@ -144,12 +144,13 @@ fun TextField(
     )
 }
 
-@Preview(group = PreviewGroup.TextFields)
+@ElementPreviews(group = PreviewGroup.TextFields)
 @Composable
-internal fun TextFieldLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
+internal fun TextFieldLightPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
-@Preview(group = PreviewGroup.TextFields)
+@ElementPreviews(group = PreviewGroup.TextFields)
 @Composable
 internal fun TextFieldDarkPreview() =
     ElementPreviewDark { ContentToPreview() }

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

@@ -24,8 +24,8 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -50,10 +50,11 @@ fun TopAppBar(
     )
 }
 
-@Preview(group = PreviewGroup.AppBars)
+@ElementPreviews(group = PreviewGroup.AppBars)
 @Composable
-internal fun TopAppBarPreview() =
-    ElementThemedPreview { ContentToPreview() }
+internal fun TopAppBarPreview() {
+    ElementPreview { ContentToPreview() }
+}
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable

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

@@ -22,19 +22,19 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import io.element.android.libraries.designsystem.components.dialogs.AlertDialogContent
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
-@Preview(group = PreviewGroup.DateTimePickers)
+@ElementPreviews(group = PreviewGroup.DateTimePickers)
 @Composable
 internal fun DatePickerPreviewLight() {
-    ElementPreviewLight { ContentToPreview() }
+    ElementPreview { ContentToPreview() }
 }
 
-@Preview(group = PreviewGroup.DateTimePickers)
+@ElementPreviews(group = PreviewGroup.DateTimePickers)
 @Composable
 internal fun DatePickerPreviewDark() {
     ElementPreviewDark { ContentToPreview() }

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

@@ -24,8 +24,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.DropdownMenu
@@ -34,10 +34,10 @@ import io.element.android.libraries.designsystem.theme.components.DropdownMenuIt
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 
-@Preview(group = PreviewGroup.Menus)
+@ElementPreviews(group = PreviewGroup.Menus)
 @Composable
 internal fun MenuPreview() {
-    ElementThemedPreview {
+    ElementPreview {
         var isExpanded by remember { mutableStateOf(false) }
         Button(onClick = { isExpanded = !isExpanded }) {
             Text("Toggle")

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

@@ -26,16 +26,16 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Icon
 
-@Preview(group = PreviewGroup.Toggles)
+@ElementPreviews(group = PreviewGroup.Toggles)
 @Composable
 internal fun SwitchPreview() {
-    ElementThemedPreview {
+    ElementPreview {
         Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
             var checked by remember { mutableStateOf(false) }
             Switch(checked = checked, onCheckedChange = { checked = !checked })
@@ -43,9 +43,13 @@ internal fun SwitchPreview() {
                 Icon(imageVector = Icons.Outlined.Check, contentDescription = null)
             })
             Switch(checked = checked, enabled = false, onCheckedChange = { checked = !checked })
-            Switch(checked = checked, enabled = false, onCheckedChange = { checked = !checked }, thumbContent = {
-                Icon(imageVector = Icons.Outlined.Check, contentDescription = null)
-            })
+            Switch(
+                checked = checked,
+                enabled = false,
+                onCheckedChange = { checked = !checked },
+                thumbContent = {
+                    Icon(imageVector = Icons.Outlined.Check, contentDescription = null)
+                })
         }
     }
 }

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

@@ -23,23 +23,27 @@ import androidx.compose.material3.TimePicker
 import androidx.compose.material3.TimePickerLayoutType
 import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviews
 import io.element.android.libraries.designsystem.components.dialogs.AlertDialogContent
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @OptIn(ExperimentalMaterial3Api::class)
-@Preview(widthDp = 600, group = PreviewGroup.DateTimePickers)
+@ElementPreviews(widthDp = 600, group = PreviewGroup.DateTimePickers)
 @Composable
 internal fun TimePickerHorizontalPreview() {
-    ElementThemedPreview {
+    ElementPreview {
         AlertDialogContent(
             buttons = { /*TODO*/ },
             icon = { /*TODO*/ },
             title = { /*TODO*/ },
-            text = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Horizontal) },
+            text = {
+                TimePicker(
+                    state = rememberTimePickerState(),
+                    layoutType = TimePickerLayoutType.Horizontal
+                )
+            },
             shape = AlertDialogDefaults.shape,
             containerColor = AlertDialogDefaults.containerColor,
             tonalElevation = AlertDialogDefaults.TonalElevation,
@@ -52,10 +56,10 @@ internal fun TimePickerHorizontalPreview() {
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
-@Preview(group = PreviewGroup.DateTimePickers)
+@ElementPreviews(group = PreviewGroup.DateTimePickers)
 @Composable
 internal fun TimePickerVerticalPreviewLight() {
-    ElementPreviewLight {
+    ElementPreview {
         AlertDialogContent(
             buttons = { /*TODO*/ },
             icon = { /*TODO*/ },
@@ -73,7 +77,7 @@ internal fun TimePickerVerticalPreviewLight() {
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
-@Preview(group = PreviewGroup.DateTimePickers)
+@ElementPreviews(group = PreviewGroup.DateTimePickers)
 @Composable
 internal fun TimePickerVerticalPreviewDark() {
     val pickerState = rememberTimePickerState(