How to add extra colors into MaterialTheme in Android Jetpack Compose?

Just a small change to Valeriy Katkov's answer

In some versions of the android studio, the following code will not work

@Composable
val Colors.myExtraColor: Color
    get() = if (isLight) Color.Red else Color.Green

@Composable
fun ExtraColorExample() {
    Text(
        text = "test",
        color = MaterialTheme.colors.myExtraColor // <-- the newly added color
    )
}

It will show an error

This annotation is not applicable to target 'top-level property without backing field or delegate'

To fix this either write it like this

@get:Composable
val Colors.myExtraColor: Color
    get() = if (isLight) Color.Red else Color.Green

Or

val Colors.myExtraColor: Color
    @Composable
    get() = if (isLight) Color.Red else Color.Green

The version I found this error in

Android Studio Arctic Fox | 2020.3.1 Canary 12
Build #AI-203.7148.57.2031.7226969, built on March 23, 2021
Runtime version: 11.0.8+10-b944.6842174 amd64
VM: OpenJDK 64-Bit Server VM by N/A
Windows 10 10.0

There are basically two approaches to this:

The naive way is to just create extension properties tot hard-code the colors. If you don't want to support multiple themes or light/dark mode this works just fine.

If you want to integrate your colors properly to the theme, you can read my article on it, as it's a bit long to inline here: https://gustav-karlsson.medium.com/extending-the-jetpack-compose-material-theme-with-more-colors-e1b849390d50

But in short, the steps are:

• Create your own MyColors class that holds a reference to Colors as well as your new colors.
• Create a CompositionLocal that holds a MyColor instance.
• Create your theme and wrap the MaterialTheme in a CompositionLocalProvider where the CompositionLocal provides MyColors. Make sure to also assign the Colors instance from MyColors to the MaterialTheme.
• Create an extension property on MaterialTheme that refers to the CompositionLocal holding MyColors. This is how you refer to your new colors.

This will allow you to introduce new colors to the theme that will update dynamically as the theme changes.

Extending Colors class

You can easily add an extension property to the Colors class so it would be available via any Colors object across your app.

@Composable
val Colors.myExtraColor: Color
    get() = if (isLight) Color.Red else Color.Green

@Composable
fun ExtraColorExample() {
    Text(
        text = "test",
        color = MaterialTheme.colors.myExtraColor // <-- the newly added color
    )
}

There's an example in the compose documentation as well, see Extending Material colors.

Specifying a content alpha

In case the color you're missing differs from an existing one only by it's alpha and the purpose of the color is to change a content priority, there's no need to add an additional color to the theme. You can specify a content alpha for a hierarchy by providing a value for LocalContentAlpha.

CompositionLocalProvider(
    LocalContentAlpha provides ContentAlpha.medium,
    LocalContentColor provides MaterialTheme.colors.onSurface
) {
    // this text is displayed using ContentAlpha.medium
    // and MaterialTheme.colors.onSurface color
    Text("Hello world!") 
}

See Content Alpha documentation for more details. There's also Content Alpha section in Jetpack Compose Theming codelab.

"CompositionLocal" answer is right, but maybe not quite easy to understand.

Android Developers on youtube send a video: "Compose by example". https://www.youtube.com/watch?v=DDd6IOlH3io on 6:28/22:07 Introduced this usage.

Here is my sample code to learn this part, for someone to copy:

Define the theme:

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

val yellow200 = Color(0xffffeb46)
val yellow400 = Color(0xffffc000)
val yellow500 = Color(0xffffde03)
val yellowDarkPrimary = Color(0xff242316)
val yellowLightPrimary = Color(0xffd4d3f6)


class RabbitColorPalette(
    val raFirstColor: Color,
    val raSecColor: Color,
    val raOnFirstColor: Color,
    val raOnSecColor: Color
    )

val rabbitPurple = RabbitColorPalette(Purple200,Purple500,Purple700,Teal200)
val rabbitYellow = RabbitColorPalette(yellow200,yellow400,yellow500,yellowDarkPrimary)

val rabbitColors = compositionLocalOf<RabbitColorPalette>{
    rabbitPurple
}

@Composable
fun RabbitThemePink(
    content: @Composable() () -> Unit
) {
    val colors = rabbitPurple
    CompositionLocalProvider(rabbitColors provides colors){
        MaterialTheme(
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}

object RabbitTheme{
    val colors: RabbitColorPalette
        @Composable get() = rabbitColors.current
}

@Composable
fun RabbitThemeYellow(
    content: @Composable() () -> Unit
) {
    val colors = rabbitYellow
    CompositionLocalProvider(rabbitColors provides colors){
        MaterialTheme(
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
} 

usage

class RabbitThemeActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            RabbitThemePink {
                SampleLayout()
            }
        }
    }

    @Composable
    fun SampleLayout() {
        Column {
            Text(text = "sample", modifier = Modifier.background(color = RabbitTheme.colors.raFirstColor))
            Text(text = "des", modifier = Modifier.background(color = RabbitTheme.colors.raSecColor))
        }
    }

    @Preview
    @Composable
    fun ConstraintLayoutContentPinkPreview() {
        RabbitThemePink {
            SampleLayout()
        }
    }

    @Preview
    @Composable
    fun ConstraintLayoutContentYellowPreview() {
        RabbitThemeYellow {
            SampleLayout()
        }
    }
}