安卓Compose自定义主题颜色 - 文字颜色无法选择主题颜色

Question

我似乎无法理解为什么我的主题颜色没有被 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
        )
    }
}

我的主题从这里复制而来：https://github.com/android/compose-samples/blob/92f2f16e4e63fa0e4418f660dde9e9558674cee5/Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Theme.kt

以下是代码：

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
    //...
}

布局检查器明确显示文本为蓝色，为什么它没有被绘制成蓝色？

- Benoit

Answer 1

实际上，这是一个非常愚蠢的错误。

我的颜色定义得不好。

val DodgerBlue = Color(0x4681F7)

代替（注意 alpha 部分）

val DodgerBlue = Color(0xff4681F7)

有趣的部分是布局编辑器能够显示正确的颜色...这让我感觉像是一个bug！

- Benoit

Answer 2

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

从资源文件中使用颜色

- ShehryarAhmed