60

I want to use custom colors defined in the colors.xml class directly without using the Material theme colors or the default theme provided by the Jetpack. Is there any straightforward way to do it?

3 Answers 3

142

You can use colorResource() which loads a color resource.

Text(
    text = "Hello World",
    color = colorResource(R.color.purple_200)
)
3
  • 6
    This certainly does work, however I think the idea is to have your colors in your Colors.kt file and part of the benefit of migrating to Jetpack Compose is being able to rid the project of that wretched thing we call XML. Lol happy coding! Commented Jun 10, 2021 at 14:58
  • @JoshuaKing ... the colorResource(...) idea works well because of that "magic numbers" thing that appears in static code analysis. Commented Aug 15, 2022 at 21:08
  • This worked for me. I just needed to add import com.mypackagename.R manually. Commented Jan 12, 2023 at 13:11
23

To use color in jetpack compose using recommended create a package ui.theme in com.<domain_name>.<app_name> which will likely be present by default if you are creating empty compose project. Now create Color.kt and Theme.kt kotlin files if they are not present in your project.

In Color.kt add the colors you need

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)

Here is ready to use a Material Color template made by me

There are 3 common ways of using colors

Method 1 : Directly use color

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

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

Method 2 : Override default MaterialTheme colors

Now in, Theme.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()
}

Method 3 : Custom theme (Recommended method)

Text(text = "Hello ", color = AppNameTheme.colors.customColor)
1
  • Can you please provide more detail about Method 3, means where we can define customColor that can access using our app theme as in your example NotepadTheme?
    – Deven
    Commented Jul 28 at 12:36
2

Defined the colors in ui/theme/Color.kt

val LightGray = Color(0xFFE7E2E2)
val LighterGray = Color(0xFFDED8D8)
val MediumGray = Color(0xFFD3CACA)
val DarkerGray = Color(0xFF9D9999)
val VeryDarkGray = Color(0xFF646161)
val BlackGray = Color(0xFF020202)

than call them with:

import com.example.<appName>.ui.theme.*

than simply use them by writing their NAME:

val buttonColor = when (i) {
        0 -> LightGray
        1 -> LighterGray
        2 -> MediumGray
        3 -> DarkerGray
        4 -> VeryDarkGray
        else -> BlackGray
}
2
  • This works for me, easy. Commented May 19 at 2:07
  • this is the best way for Jetpack Compose actually
    – oolyvi
    Commented May 22 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.