Button and status bar still purple after switching color theme

Question

I switched all the colors in the Color.kt compose file to the ones I want. The problem is that the button I implmented is still purple. As you can see, its only the button which does not get the new Theme colors, but the text input fields are dark grey as intended.

This is the code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginScreen(
    nav: NavController
) {
    val viewModel: LoginViewModel = viewModel()

    HanniverReloadedTheme() {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            var usernameTextField by remember { mutableStateOf("") }
            var passwordTextField by remember { mutableStateOf("") }
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier.padding(bottom = 8.dp),
                    text = stringResource(id = R.string.app_name),
                    fontFamily = FontFamily.Monospace,
                    color = MaterialTheme.colors.primary,
                    style = MaterialTheme.typography.h5
                )
                TextField(
                    value = usernameTextField,
                    onValueChange = { usernameTextField = it },
                    label = { Text(stringResource(id = R.string.login_page_label_username)) },

                    )
                TextField(
                    value = passwordTextField,
                    onValueChange = { passwordTextField = it },
                    label = { Text(stringResource(id = R.string.login_page_label_password)) },
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
                    visualTransformation = PasswordVisualTransformation()
                )
                Button(
                    modifier = Modifier.padding(top = 8.dp),
                    onClick = { /*TODO*/ }
                ) {
                    Text(stringResource(id = R.string.login_page_button_login))
                }
            }
        }
    }
}

Also the Statusbar didnt change color and is still purple. So I tried to change the colors also in the colors.xml file and changed also the themes.xml so that it routes to the right color. It worked but I dont like the solution. Is there another approach for that or is this the way we do it so far?

Are you sure that you are using that theme in your composable? — Gabriele Mariotti, Oct 24 '22 at 06:46
@GabrieleMariotti It works on the TextFields. As if you see the caret and the focused underline have DarkGrey as color which is from the theme. — Chris Pi, Oct 24 '22 at 10:44

score 0 · Answer 1 · answered Oct 23 '22 at 19:38

In the jetpack compose, colors are set in the Theme.kt file. So what you need to change is the Primary color in this file. By doing that, the specified color would be applied to all of your buttons. But if you want to change the color of a single button, you can override ButtonDefaults:

Button(
    onClick = { /*TODO*/ },
    colors = ButtonDefaults.buttonColors(
        backgroundColor =...,
        contentColor =...,
        disabledBackgroundColor =...,
        disabledContentColor =...
    )
) {

}

The Theme.kt has the changes. It works on the `TextField` – Chris Pi Oct 23 '22 at 20:58 — Chris Pi, Oct 23 '22 at 20:58

Button and status bar still purple after switching color theme

1 Answers1