Android Compose Custom Theme colors - Text color not picking the theme color

Question

I can't seem to understand why my theme colours are not being picked up by Android Compose Text (compose 1.0.0-beta01 & beta02)

setContent {
    MyTheme {
        Text(
            "hello world!",
//                    color = androidx.compose.ui.graphics.Color.Red, // this works
            color = MyTheme.colors.colorPrimary, // this doesn't work
            style = MyTheme.typography.label, // this works
        )
    }
}

My theme is copied from here https://github.com/android/compose-samples/blob/92f2f16e4e63fa0e4418f660dde9e9558674cee5/Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Theme.kt

Here is the code

private val LightColorPalette = MyColors(
    colorPrimary = DodgerBlue,
    colorOnPrimary = White,
//...
    isDark = false
)

private val DarkColorPalette = MyColors(
    colorPrimary = DodgerBlue,
    colorOnPrimary = White,
//...

    isDark = true
)


@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val customColours = if (darkTheme) DarkColorPalette else LightColorPalette
    val typography = MyTypography(
        h1 = TextStyle(
            fontFamily = circularXxFontFamily,
            fontWeight = FontWeight.W300,
            fontSize = 24.sp,
            color = customColours.colorOnSurface,
            lineHeight = 30.sp,
        ),
        //...
        label = TextStyle(
            fontFamily = xxxxFontFamily,
            fontWeight = FontWeight.W300,
            fontSize = 12.sp,
            color = customColours.colorOnSurface,
            lineHeight = 15.sp,
        )
    )

    ProvideMyTheme(customColours, typography) {
        MaterialTheme(
            colors = mapBasicColors(customColours, darkTheme),
            typography = Typography(),
            shapes = Shapes(),
            content = content
        )
    }
}


object MyTheme {
    val colors: MyColors
        @Composable
        get() = LocalMyColors.current

    val typography: MyTypography
        @Composable
        get() = LocalMyStyle.current
}

@Stable
class MyColors( 
    colorPrimary: Color,
    colorOnPrimary: Color,
//...

    isDark: Boolean
) {

    var colorPrimary by mutableStateOf(colorPrimary)
        private set
    var colorOnPrimary by mutableStateOf(colorOnPrimary)
        private set
//...
    var isDark by mutableStateOf(isDark)
        private set

    fun update(other: MyColors) {
        colorPrimary = other.colorPrimary
        colorOnPrimary = other.colorOnPrimary
        //...
        isDark = other.isDark
    }
}

@Composable
fun ProvideMyTheme(
    colors: MyColors,
    typography: MyTypography,
    content: @Composable () -> Unit
) {
    val colorPalette = remember { colors }
    colorPalette.update(colors)
    val myTypography = remember { typography }
    CompositionLocalProvider(
        LocalMyColors provides colorPalette,
        LocalMyStyle provides myTypography,
        content = content)
}

private val LocalMyColors = staticCompositionLocalOf<MyColors> {
    error("No ColorPalette provided")
}

private val LocalMyStyle = staticCompositionLocalOf<MyTypography> {
    error("No Typography provided")
}


fun mapBasicColors(
    colors: MyColors,
    darkTheme: Boolean,
) = Colors(
    primary = colors.colorPrimary,
    primaryVariant = colors.colorPrimaryVariant,
    secondary = colors.colorSecondary,
    secondaryVariant = colors.colorSecondaryVariant,
    background = colors.colorBackground,
    surface = colors.colorSurface,
    error = colors.colorError,
    onPrimary = colors.colorOnPrimary,
    onSecondary = colors.colorOnSecondary,
    onBackground = colors.colorOnBackground,
    onSurface = colors.colorOnSurface,
    onError = colors.colorOnError,
    isLight = !darkTheme
)


@Stable
class MyTypography(
    h1: TextStyle,
    label: TextStyle,
    //...
) {
    var h1 by mutableStateOf(h1)
        private set
    var label by mutableStateOf(label)
        private set
    //...
}

The layout inspector clearly says the text is blue so why is it not drawn blue?

Answer 1

@Composable
fun messageCard(name:String){
    Text(text = "Bismillah $name", color = colorResource(id = R.color.purple_200))
}

use colors from the resource file

Answer 2

Well it was indeed a very stupid mistake

My colours were defined badly

val DodgerBlue = Color(0x4681F7)

instead of (notice the alpha part)

val DodgerBlue = Color(0xff4681F7)

The interesting part is the Layout editor was able to show the correct colour... smells like a bug to me!