¿Cómo uso el recurso Color directamente en Jetpack Compose?

Quiero usar colores personalizados definidos en la clase colors.xml directamente sin usar los colores del tema Material o el tema predeterminado proporcionado por el Jetpack. ¿Hay alguna forma sencilla de hacerlo?

Puedes usar colorResource() que carga un recurso de color.

Text(
    text = "Hello World",
    color = colorResource(R.color.purple_200)
)

Para usar color en jetpack componer usando recomendado crear un paquete ui.tema en com.. que probablemente estará presente de forma predeterminada si está creando un proyecto de redacción vacío. Ahora crea Color.kt y Tema.kt kotlin archivos si no están presentes en su proyecto.

En Color.kt agrega los colores que necesites

package com.<domain_name>.<app_name>.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val Flower = Color(0xFF4CAF50)
val Deer = Color(0xFFFF5722)
val Mango = Color(0xFFFF9800)
val AppbarColor = Color(0xFF2196F3)

Aquí está lista para usar una plantilla de Material Color hecha por mí

Hay 3 formas comunes de usar colores

Método 1: usar color directamente

import com.<domain_name>.<app_name>.ui.theme.*

Text(text = "Hello ", color = Flower)

Método 2: Anular los colores predeterminados de MaterialTheme

Ahora en, Tema.kt

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    onBackground = Flower //Custom color
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    onBackground = Deer //Custom color

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

@Composable
fun NotepadTheme(darkTheme: Boolean = isSystemInDarkTheme(), 
content:@Composable() () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ColorApp()
        }
    }
}

@Composable
fun ColorApp() {
    ColorTheme {
        Surface(modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background) {
            Greeting("Android")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", color = MaterialTheme.colors.onBackground) //Using color
}

@Preview(
    showBackground = true, name = "Light mode",
    uiMode = Configuration.UI_MODE_NIGHT_NO or 
    Configuration.UI_MODE_TYPE_NORMAL
    )
@Preview(
    showBackground = true, name = "Night mode",
    uiMode = Configuration.UI_MODE_NIGHT_YES or 
    Configuration.UI_MODE_TYPE_NORMAL
)
@Composable
fun DefaultPreview() {
    ColorApp()
}

Método 3: tema personalizado (Método recomendado)

Text(text = "Hello ", color = AppNameTheme.colors.customColor)