JetpackCompose の OutlinedTextFieldの色を調整したいとき備忘録

JetpackComposeのTextFieldやOutlinedTextFieldを使用している時に、各場所の色をデフォルトから変更したいことがあると思います。
そういう場合に、 OutlinedTextFieldDefaults.colorsのどこを変更したらどの色が変わるのかというのを記録したメモです。

環境

androidx.compose.material3:material3:1.2.1"
です。

デフォルト(何も調整しない時)

• コード

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
        )
    }
}

• こんな感じ

枠線の色を変更したい

xxxBorderColorを変更する

• コード

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            colors = OutlinedTextFieldDefaults.colors(
                focusedBorderColor = Color.Red,
                unfocusedBorderColor = Color.Blue,
                disabledBorderColor = Color.DarkGray,
                errorBorderColor = Color.Yellow,
            ),
        )
    }
}

• こんな感じ

背景の色を変更したい

xxxContainerColorを変更する

• コード

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            colors = OutlinedTextFieldDefaults.colors(
                focusedContainerColor = Color.Red,
                unfocusedContainerColor = Color.Blue,
                disabledContainerColor = Color.DarkGray,
                errorContainerColor = Color.Yellow,
            ),
        )
    }
}

• こんな感じ

カーソルの色を変更したい

cursorColorを変更する

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            colors = OutlinedTextFieldDefaults.colors(
                cursorColor = Color.Red,
            ),
        )
    }
}

• こんな感じ

入力したテキストの色を変更したい

xxxTextColorを変更する

• コード

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            colors = OutlinedTextFieldDefaults.colors(
                focusedTextColor = Color.Red,
                unfocusedTextColor = Color.Blue,
                disabledTextColor = Color.DarkGray,
                errorTextColor = Color.Yellow,
            ),
        )
    }
}

• こんな感じ

placeholder(ヒント)テキストの色を変更したい

xxxPlaceholderColorを変更する

• コード

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            colors = OutlinedTextFieldDefaults.colors(
                focusedPlaceholderColor = Color.Red,
                unfocusedPlaceholderColor = Color.Blue,
                disabledPlaceholderColor = Color.DarkGray,
                errorPlaceholderColor = Color.Yellow,
            ),
        )
    }
}

• こんな感じ

labelテキストの色を変更したい

xxxPlaceholderColorを変更する

• コード

@Composable
fun SampleScreen() {
    val str = remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = str.value,
            onValueChange = {
                str.value = it
            },
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            colors = OutlinedTextFieldDefaults.colors(
                focusedLabelColor = Color.Red,
                unfocusedLabelColor = Color.Blue,
                disabledLabelColor = Color.DarkGray,
                errorLabelColor = Color.Yellow,
            ),
        )
    }
}

• こんな感じ

その他

他にもOutlinedTextFieldにはsuffixやleadingIconなども設定できますが、それらの色の変更はfocusedPrefixColorなどわかりやすい名称になっているので迷うことはないかと思います。