Create ExtendedColors to define more colors.

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

@@ -52,10 +52,4 @@ val ElementGreen = Color(0xFF0DBD8B)
 val ElementOrange = Color(0xFFD9B072)
 val Vermilion = Color(0xFFFF5B55)
 
-// TODO Update color
-val MessageHighlightLight = Azure
-
-// TODO Update color
-val MessageHighlightDark = Azure
-
 val LinkColor = Color(0xFF054F6E)

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
+
+@Immutable
+data class ExtendedColors(
+    val messageFromMeBackground: Color,
+    val messageFromOtherBackground: Color,
+    val messageHighlightedBackground: Color,
+)
+
+internal val extendedColorsLight = ExtendedColors(
+    messageFromMeBackground = SystemGrey5Light,
+    messageFromOtherBackground = SystemGrey6Light,
+    messageHighlightedBackground = Azure,
+)
+
+internal val extendedColorsDark = ExtendedColors(
+    messageFromMeBackground = SystemGrey5Dark,
+    messageFromOtherBackground = SystemGrey6Dark,
+    messageHighlightedBackground = Azure,
+)

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

@@ -27,6 +27,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
@@ -64,9 +65,18 @@ private val LightColorScheme = lightColorScheme(
     onSurface = Color(0xFF1C1B1F),
      */
 )
+
 @Suppress("CompositionLocalAllowlist")
 val LocalIsDarkTheme = compositionLocalOf<Boolean> { error("Not defined") }
 
+val LocalExtendedColors = staticCompositionLocalOf {
+    ExtendedColors(
+        messageFromMeBackground = Color.Unspecified,
+        messageFromOtherBackground = Color.Unspecified,
+        messageHighlightedBackground = Color.Unspecified,
+    )
+}
+
 @Composable
 fun ElementXTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
@@ -95,7 +105,12 @@ fun ElementXTheme(
         )
     }
 
-    CompositionLocalProvider(LocalIsDarkTheme provides darkTheme) {
+    val extendedColors = if (darkTheme) extendedColorsDark else extendedColorsLight
+
+    CompositionLocalProvider(
+        LocalIsDarkTheme provides darkTheme,
+        LocalExtendedColors provides extendedColors,
+    ) {
         MaterialTheme(
             colorScheme = colorScheme,
             typography = Typography,