icerockdev / moko-resources

Resources access for mobile (android & ios) Kotlin Multiplatform development
https://moko.icerock.dev/
Apache License 2.0
1.1k stars 120 forks source link

Color references don't work when using dark/light attributes #453

Open rylexr opened 1 year ago

rylexr commented 1 year ago

When using light/dark attributes pointing to another themed color, moko resources is unable to generate the platform files properly. Take this example:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="themeColor1">
        <light>0xB92743FF</light>
        <dark>7CCFEEFF</dark>
    </color>
    <color name="themeColor2">
        <light>@color/themeColor1</light>
        <dark>@color/themeColor1</dark>
    </color>
</resources>

I'd expect referencing @color/themeColor1 from themeColor2 to resolve to light and dark values accordingly and to use themeColor2.light value in Android values/colors.xml and themeColor2.dark value in values-night/colors.xml. Could we please add support for this?

Also, is there a workaround?

softcleandev commented 1 year ago

I have the same problem. @Alex009

softcleandev commented 1 year ago

I use the dark and light colors for darkColors() and lightColors() functions, so I can use them in MaterialTheme.

private val DarkColorPalette = darkColors(
    primary = Color(MR.colors.primary.dark.colorInt()),
    primaryVariant = Color(MR.colors.primaryVariant.dark.colorInt()),
    onPrimary = Color(MR.colors.onPrimary.dark.colorInt()),

    secondary = Color(MR.colors.primary.dark.colorInt()),
    onSecondary = Color(MR.colors.onPrimary.dark.colorInt()),

    error = Color(MR.colors.error.dark.colorInt()),
    onError = Color(MR.colors.onError.dark.colorInt()),
)

private val LightColorPalette = lightColors(
    primary = Color(MR.colors.primary.light.colorInt()),
    primaryVariant = Color(MR.colors.primaryVariant.light.colorInt()),
    onPrimary = Color(MR.colors.onPrimary.light.colorInt()),

    secondary = Color(MR.colors.primary.light.colorInt()),
    onSecondary = Color(MR.colors.onPrimary.light.colorInt()),

    error = Color(MR.colors.error.light.colorInt()),
    onError = Color(MR.colors.onError.light.colorInt()),
)
val colors = remember {
        mutableStateOf(
            if (darkTheme.value) {
                DarkColorPalette
            } else {
                LightColorPalette
            }
        )
    }

    ...
        MaterialTheme(
            colors = colors.value,
            content = content,
        )

Could it be that my approach to using the dark/light colors is completely wrong?

rylexr commented 1 year ago

Any news on this one @Alex009 ?