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

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

# 環境
`androidx.compose.material3:material3:1.2.1"`
です。


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

- コード

```kotlin
@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") },
        )
    }
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/d42caf07-5b71-aa28-a9ab-64111696bafb.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/3f50f1ee-6e0c-645b-37e3-fdf316a665b0.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/b2f2acab-8297-4379-5b00-a8952566704d.png" width="200px"></img>

# 枠線の色を変更したい

`xxxBorderColor`を変更する


- コード

```kotlin
@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,
            ),
        )
    }
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/347ba1b8-39e2-05e1-caeb-b7e29faa0cf4.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/1b49b5a0-b787-f64c-a765-479d86833995.png" width="200px"></img>   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/cc1d2f6c-acb6-de63-7462-7e94fc6c691a.png" width="200px"></img>





# 背景の色を変更したい

`xxxContainerColor`を変更する

- コード

```kotlin
@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,
            ),
        )
    }
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/64f3ab6a-952b-63e2-5c9f-7eb5eb18ee90.png" width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/b495b2fe-c666-d6bc-c3be-cf05bbe0f89a.png" width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/332d0382-5848-2b6f-d66d-ea251e0a1096.png" width="200px"></img>  

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

`cursorColor`を変更する


```kotlin
@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,
            ),
        )
    }
}
```


- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/7e4f3b39-3d44-1d78-ab2d-4279200c8093.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/efe7b626-67ad-122a-2654-2559a3d173e3.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/72a6c50b-1c23-a9df-1519-836593809638.png" width="200px"></img>


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

`xxxTextColor`を変更する

- コード
```kotlin
@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,
            ),
        )
    }
}
```


- こんな感じ


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/8c6e9c1d-8875-ba1d-4214-06f2c07262c0.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/e3f7497f-710b-015b-3b9e-698b872f5864.png" width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/0526d3df-e5cb-f565-7364-9cf96a1e1b6a.png" width="200px"></img>


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

`xxxPlaceholderColor`を変更する

- コード
```kotlin
@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,
            ),
        )
    }
}
```

- こんな感じ


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/6d5ed3d3-34ac-fa5d-25f6-b4de63781067.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/507fd26b-d4a8-337c-e55f-27e083f2fcef.png" width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/944fd0a3-4142-9ea0-061c-e180cefd6f70.png" width="200px"></img>



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

`xxxPlaceholderColor`を変更する

- コード
```kotlin
@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,
            ),
        )
    }
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/a3fe9c1d-3e29-201a-a319-d148ae48736e.png" width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/4674acee-4605-1c86-43e0-5cd4740df26b.png" width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/fbd9dbed-769e-99fb-cd49-d915d70dc816.png" width="200px"></img>



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