Home > Software engineering >  Problems changing the Color with MaterialTheme in a project of Kotlin
Problems changing the Color with MaterialTheme in a project of Kotlin

Time:01-27

I'm having troubles to change the colors of my material theme, this is what I have:

            Surface(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .constrainAs(surface) {
                        bottom.linkTo(parent.bottom)
                    },
                color = MaterialTheme.colors.Background,
                shape = RoundedCornerShape(topEndPercent = 8, topStartPercent = 8)


            ) 

additionally I have this:

    private val LightColorPalette = lightColors(

    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    background = Background  
    ) 

and this

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val Background =Color(red = 252, green = 237, blue = 203)

but when I see the app the background is white and I don't know why, what would be the problem?

CodePudding user response:

You have to wrap your content with MaterialTheme composable that is using your color palette, like this:

MaterialTheme(
    colors = LightColorPalette,
) {
    Surface(
        ...
    )

}

It's described here: https://developer.android.com/jetpack/compose/themes/material

CodePudding user response:

as Jan Bina said the problem was that I wasn't using my MatherialTheme so in the MainActivity I made this change:

From this:

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

To this:


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


        }
    }
}
  •  Tags:  
  • Related