First draft of full custom theme.

ElementTheme everywhere

Create ElementButton

features/messages/src/main/kotlin/io/element/android/features/messages/MessagesView.kt

@@ -21,6 +21,7 @@
 
 package io.element.android.features.messages
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -64,6 +65,9 @@ import io.element.android.features.messages.timeline.TimelineView
 import io.element.android.features.messages.timeline.model.TimelineItem
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.components.ElementScaffold
+import io.element.android.libraries.designsystem.theme.components.ElementTopAppBar
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import kotlinx.coroutines.launch
 import timber.log.Timber
@@ -101,7 +105,7 @@ fun MessagesView(
         state.eventSink(MessagesEvents.HandleAction(action, messageEvent))
     }
 
-    Scaffold(
+    ElementScaffold(
         modifier = modifier,
         contentWindowInsets = WindowInsets.statusBars,
         topBar = {
@@ -172,7 +176,7 @@ fun MessagesViewTopBar(
     modifier: Modifier = Modifier,
     onBackPressed: () -> Unit = {},
 ) {
-    TopAppBar(
+    ElementTopAppBar(
         modifier = modifier,
         navigationIcon = {
             IconButton(onClick = onBackPressed) {

features/messages/src/main/kotlin/io/element/android/features/messages/actionlist/ActionListView.kt

@@ -29,7 +29,6 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ListItem
 import androidx.compose.material.LocalContentColor
-import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ModalBottomSheetLayout
 import androidx.compose.material.ModalBottomSheetState
 import androidx.compose.material.ModalBottomSheetValue
@@ -44,6 +43,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.actionlist.model.TimelineItemAction
 import io.element.android.features.messages.timeline.model.TimelineItem
 import io.element.android.libraries.designsystem.components.VectorIcon
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.launch
 
@@ -115,13 +115,13 @@ private fun SheetContent(
                         text = {
                             Text(
                                 text = action.title,
-                                color = if (action.destructive) MaterialTheme.colors.error else Color.Unspecified,
+                                color = if (action.destructive) ElementTheme.colors.error else Color.Unspecified,
                             )
                         },
                         icon = {
                             VectorIcon(
                                 resourceId = action.icon,
-                                tint = if (action.destructive) MaterialTheme.colors.error else LocalContentColor.current,
+                                tint = if (action.destructive) ElementTheme.colors.error else LocalContentColor.current,
                             )
                         }
                     )

features/messages/src/main/kotlin/io/element/android/features/messages/textcomposer/MessageComposerView.kt

@@ -18,7 +18,7 @@ package io.element.android.features.messages.textcomposer
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import io.element.android.libraries.designsystem.LocalIsDarkTheme
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.textcomposer.TextComposer
 
 @Composable
@@ -51,7 +51,7 @@ fun MessageComposerView(
         onComposerTextChange = ::onComposerTextChange,
         composerCanSendMessage = state.isSendButtonVisible,
         composerText = state.text?.charSequence?.toString(),
-        isInDarkMode = LocalIsDarkTheme.current,
+        isInDarkMode = !ElementTheme.colors.isLight,
         modifier = modifier
     )
 }

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

@@ -42,7 +42,6 @@ import androidx.compose.material.icons.filled.ArrowDownward
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -79,6 +78,7 @@ 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.theme.ElementTheme
 import io.element.android.libraries.designsystem.utils.PairCombinedPreviewParameter
 import io.element.android.libraries.matrix.core.EventId
 import kotlinx.collections.immutable.ImmutableList
@@ -267,7 +267,7 @@ private fun MessageSenderInformation(
         }
         Text(
             text = sender,
-            style = MaterialTheme.typography.titleMedium,
+            style = ElementTheme.typography.titleMedium,
             modifier = Modifier
                 .alignBy(LastBaseline)
         )
@@ -326,8 +326,8 @@ internal fun BoxScope.TimelineScrollHelper(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
                 .size(40.dp),
-            containerColor = MaterialTheme.colorScheme.surfaceVariant,
-            contentColor = MaterialTheme.colorScheme.onSurfaceVariant
+            containerColor = ElementTheme.colors.surfaceVariant,
+            contentColor = ElementTheme.colors.onSurfaceVariant
         ) {
             Icon(Icons.Default.ArrowDownward, "")
         }
@@ -345,7 +345,7 @@ internal fun TimelineLoadingMoreIndicator() {
     ) {
         CircularProgressIndicator(
             strokeWidth = 2.dp,
-            color = MaterialTheme.colorScheme.primary
+            color = ElementTheme.colors.primary
         )
     }
 }

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

@@ -23,14 +23,14 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.timeline.model.MessagesItemGroupPosition
-import io.element.android.libraries.designsystem.LocalExtendedColors
+import io.element.android.libraries.designsystem.theme.components.ElementSurface
+import io.element.android.libraries.designsystem.theme.ElementTheme
 
 private val BUBBLE_RADIUS = 16.dp
 
@@ -82,16 +82,16 @@ fun MessageEventBubble(
     }
 
     val backgroundBubbleColor = if (isHighlighted) {
-        LocalExtendedColors.current.messageHighlightedBackground
+        ElementTheme.colors.messageHighlightedBackground
     } else {
         if (isMine) {
-            LocalExtendedColors.current.messageFromMeBackground
+            ElementTheme.colors.messageFromMeBackground
         } else {
-            LocalExtendedColors.current.messageFromOtherBackground
+            ElementTheme.colors.messageFromOtherBackground
         }
     }
     val bubbleShape = bubbleShape()
-    Surface(
+    ElementSurface(
         modifier = modifier
             .widthIn(min = 80.dp)
             .offsetForItem()

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

@@ -22,7 +22,6 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -34,6 +33,7 @@ import androidx.compose.ui.platform.LocalContext
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import io.element.android.features.messages.timeline.model.content.TimelineItemImageContent
+import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun TimelineItemImageView(
@@ -60,7 +60,7 @@ fun TimelineItemImageView(
         AsyncImage(
             model = model,
             contentDescription = null,
-            placeholder = ColorPainter(MaterialTheme.colorScheme.surfaceVariant),
+            placeholder = ColorPainter(ElementTheme.colors.surfaceVariant),
             contentScale = ContentScale.Crop,
             onSuccess = { isLoading.value = false },
         )

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

@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -30,6 +29,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun TimelineItemInformativeView(
@@ -44,14 +44,14 @@ fun TimelineItemInformativeView(
     ) {
         Icon(
             imageVector = icon,
-            tint = MaterialTheme.colorScheme.secondary,
+            tint = ElementTheme.colors.secondary,
             contentDescription = iconDescription,
             modifier = Modifier.size(16.dp)
         )
         Spacer(modifier = Modifier.width(4.dp))
         Text(
             fontStyle = FontStyle.Italic,
-            color = MaterialTheme.colorScheme.secondary,
+            color = ElementTheme.colors.secondary,
             fontSize = 14.sp,
             text = text
         )

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

@@ -23,8 +23,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -34,6 +32,8 @@ import androidx.compose.ui.unit.sp
 import com.google.accompanist.flowlayout.FlowRow
 import io.element.android.features.messages.timeline.model.AggregatedReaction
 import io.element.android.features.messages.timeline.model.TimelineItemReactions
+import io.element.android.libraries.designsystem.theme.components.ElementSurface
+import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
 fun TimelineItemReactionsView(
@@ -54,10 +54,10 @@ fun TimelineItemReactionsView(
 
 @Composable
 fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Modifier) {
-    Surface(
+    ElementSurface(
         modifier = modifier,
-        color = MaterialTheme.colorScheme.surfaceVariant,
-        border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
+        color = ElementTheme.colors.surfaceVariant,
+        border = BorderStroke(2.dp, ElementTheme.colors.background),
         shape = RoundedCornerShape(corner = CornerSize(12.dp)),
     ) {
         Row(
@@ -66,7 +66,7 @@ fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Mo
         ) {
             Text(text = reaction.key, fontSize = 12.sp)
             Spacer(modifier = Modifier.width(4.dp))
-            Text(text = reaction.count, color = MaterialTheme.colorScheme.secondary, fontSize = 12.sp)
+            Text(text = reaction.count, color = ElementTheme.colors.secondary, fontSize = 12.sp)
         }
     }
 }

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

@@ -25,10 +25,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.foundation.text.appendInlineContent
-import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.LocalTextStyle
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -49,6 +46,9 @@ import androidx.compose.ui.unit.sp
 import com.google.accompanist.flowlayout.FlowRow
 import io.element.android.libraries.designsystem.LinkColor
 import io.element.android.libraries.designsystem.components.ClickableLinkText
+import io.element.android.libraries.designsystem.theme.components.ElementSurface
+import io.element.android.libraries.designsystem.theme.ElementColors
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.matrix.permalink.PermalinkData
 import io.element.android.libraries.matrix.permalink.PermalinkParser
 import kotlinx.collections.immutable.persistentMapOf
@@ -214,7 +214,7 @@ private fun HtmlInline(
 ) {
     Box(modifier) {
         val styledText = buildAnnotatedString {
-            appendInlineElement(element, MaterialTheme.colorScheme)
+            appendInlineElement(element, ElementTheme.colors)
         }
         HtmlText(
             text = styledText,
@@ -232,7 +232,7 @@ private fun HtmlPreformatted(
 ) {
     val isCode = pre.firstElementChild()?.normalName() == "code"
     val backgroundColor =
-        if (isCode) MaterialTheme.colorScheme.codeBackground() else Color.Unspecified
+        if (isCode) ElementTheme.colors.codeBackground() else Color.Unspecified
     Box(
         modifier
             .background(color = backgroundColor)
@@ -255,7 +255,7 @@ private fun HtmlParagraph(
 ) {
     Box(modifier) {
         val styledText = buildAnnotatedString {
-            appendInlineChildrenElements(paragraph.childNodes(), MaterialTheme.colorScheme)
+            appendInlineChildrenElements(paragraph.childNodes(), ElementTheme.colors)
         }
         HtmlText(
             text = styledText, onClick = onTextClicked,
@@ -272,7 +272,7 @@ private fun HtmlBlockquote(
     onTextClicked: () -> Unit = {},
     onTextLongClicked: () -> Unit = {},
 ) {
-    val color = MaterialTheme.colorScheme.onBackground
+    val color = ElementTheme.colors.onBackground
     Box(
         modifier = modifier
             .drawBehind {
@@ -287,7 +287,7 @@ private fun HtmlBlockquote(
     ) {
         val text = buildAnnotatedString {
             withStyle(style = SpanStyle(fontStyle = FontStyle.Italic)) {
-                appendInlineChildrenElements(blockquote.childNodes(), MaterialTheme.colorScheme)
+                appendInlineChildrenElements(blockquote.childNodes(), ElementTheme.colors)
             }
         }
         HtmlText(
@@ -306,19 +306,19 @@ private fun HtmlHeading(
     onTextLongClicked: () -> Unit = {},
 ) {
     val style = when (heading.normalName()) {
-        "h1" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 30.sp)
-        "h2" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 26.sp)
-        "h3" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 22.sp)
-        "h4" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 18.sp)
-        "h5" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 14.sp)
-        "h6" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 12.sp)
+        "h1" -> ElementTheme.typography.headlineLarge.copy(fontSize = 30.sp)
+        "h2" -> ElementTheme.typography.headlineLarge.copy(fontSize = 26.sp)
+        "h3" -> ElementTheme.typography.headlineMedium.copy(fontSize = 22.sp)
+        "h4" -> ElementTheme.typography.headlineMedium.copy(fontSize = 18.sp)
+        "h5" -> ElementTheme.typography.headlineSmall.copy(fontSize = 14.sp)
+        "h6" -> ElementTheme.typography.headlineSmall.copy(fontSize = 12.sp)
         else -> {
             return
         }
     }
     Box(modifier) {
         val text = buildAnnotatedString {
-            appendInlineChildrenElements(heading.childNodes(), MaterialTheme.colorScheme)
+            appendInlineChildrenElements(heading.childNodes(), ElementTheme.colors)
         }
         HtmlText(
             text = text,
@@ -340,11 +340,11 @@ private fun HtmlMxReply(
 ) {
     val blockquote = mxReply.childNodes().firstOrNull() ?: return
     val shape = RoundedCornerShape(12.dp)
-    Surface(
+    ElementSurface(
         modifier = modifier
             .padding(bottom = 4.dp)
             .offset(x = -(8.dp)),
-        color = MaterialTheme.colorScheme.background,
+        color = ElementTheme.colors.background,
         shape = shape,
     ) {
         val text = buildAnnotatedString {
@@ -354,7 +354,7 @@ private fun HtmlMxReply(
                         withStyle(
                             style = SpanStyle(
                                 fontSize = 12.sp,
-                                color = MaterialTheme.colorScheme.secondary
+                                color = ElementTheme.colors.secondary
                             )
                         ) {
                             append(blockquoteNode.text())
@@ -462,13 +462,13 @@ private fun HtmlListItems(
     }
 }
 
-private fun ColorScheme.codeBackground(): Color {
+private fun ElementColors.codeBackground(): Color {
     return background.copy(alpha = 0.3f)
 }
 
 private fun AnnotatedString.Builder.appendInlineChildrenElements(
     childNodes: List<Node>,
-    colors: ColorScheme
+    colors: ElementColors
 ) {
     for (node in childNodes) {
         when (node) {
@@ -482,7 +482,7 @@ private fun AnnotatedString.Builder.appendInlineChildrenElements(
     }
 }
 
-private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ColorScheme) {
+private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ElementColors) {
     when (element.normalName()) {
         "br" -> {
             append('\n')