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

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


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


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

- コード

```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
        ),
    )
}
```
(普通は`DatePickerDialog`などに包んで使うとは思いますが、今回はそこは省略)

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/e4b3c04f-4315-b597-3c62-4f49b250d6f9.png"  width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/15d8f5f0-ba02-34cd-1bb7-d1a75b1d686c.png"  width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/4daa0664-92d1-9ac8-07e3-efdfe8655089.png"  width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/16b74fa6-adbe-e481-08e2-911ab7172a93.png"  width="200px"></img> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/c19c9023-3a73-6d84-01a3-6a4a12a1dca9.png"  width="200px"></img>  



# 年選択部分を調整したい！

## 背景色
`containerColor`を変更すればよい。

- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
        ),
        colors = DatePickerDefaults.colors(
            containerColor = Color.Yellow,
        )
    )
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/86f6b993-c3a3-f96e-eae6-c05d129069ad.png"  width="200px"></img>


## 年の数字の文字色①
選択されていおらず、今年でもない年の文字色を変更する : `yearContentColor`
選択されている時の年の文字色を変更する : `selectedYearContentColor`
「今年」が選択されていない時の文字色を変更する : `currentYearContentColor`


- コード

```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
        ),
        colors = DatePickerDefaults.colors(
            yearContentColor = Color.Blue,
            currentYearContentColor = Color.Green,
            selectedYearContentColor = Color.Yellow,
        )
    )
}
```


- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/34c504c0-623d-ff4a-fe19-f3811c45456e.png"  width="200px"></img>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/2ab0a17f-8b4b-e6d4-1464-49c6587cbf7a.png"  width="200px"></img>　


## 年の数字の文字色②

選択させない年の文字色を変更する : `disabledYearContentColor`
選択させない年が選択されてしまっている年の文字色を変更する : `disabledSelectedYearContentColor`


- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
            selectableDates = object : SelectableDates {
                override fun isSelectableYear(year: Int): Boolean {
                    return year % 2 == 1
                }
            }
        ),
        colors = DatePickerDefaults.colors(
            disabledYearContentColor = Color.Red,
            disabledSelectedYearContentColor = Color.Yellow,
        )
    )
}
```

偶数年は選択できなくしています。
ただし、アプリ起動日は2024年であり選択日のデフォルト日は「その日」となるため2024が選択された状態で始まります。


- こんな感じ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/ad5eb9c2-53ef-d509-233f-f9645154f051.png"  width="200px"></img>



## 年の数字の背景色
選択されている年の背景色を変更する : `selectedYearContainerColor`
選択させない年が選択されてしまっている年の背景色を変更する : `disabledSelectedYearContainerColor`
「今年」が選択されていない時の枠線色を変更する : `todayDateBorderColor`


- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
            selectableDates = object : SelectableDates {
                override fun isSelectableYear(year: Int): Boolean {
                    return year % 2 == 1
                }
            }
        ),
        colors = DatePickerDefaults.colors(
            selectedYearContainerColor = Color.Red,
            disabledSelectedYearContainerColor = Color.Blue,
            todayDateBorderColor = Color.Green,
        )
    )
}

```

- こんな感じ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/3cd797a6-447a-b0f0-e490-9108a80a17d7.png"  width="200px"></img>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/2deb4364-cef6-7724-2895-caa04f62b46c.png"  width="200px"></img>　

# 日付カレンダー部分を調整したい！

## 背景色
`modifier`を変更すればよい。


- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        modifier = Modifier.background(Color.Yellow),
        state = rememberDatePickerState(
        ),
        colors = DatePickerDefaults.colors(
        )
    )
}
```

- こんな感じ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/50422811-2cb4-a686-6df9-de65e53f9fa7.png"  width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/9d12a8e3-1459-f08f-a49f-fea96ee55c11.png"  width="200px"></img>  



年選択部分の背景色には影響しない。(前述の`containerColor`で変更する)


## 日付カレンダー部分の文字色①
選択されていおらず、今日でもない年の文字色を変更する : `dayContentColor`
選択されている時の日の文字色を変更する : `selectedDayContentColor`
「今日」が選択されていない時の文字色を変更する : `todayContentColor`

- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
        ),
        colors = DatePickerDefaults.colors(
            dayContentColor = Color.Blue,
            selectedDayContentColor = Color.Green,
            todayContentColor = Color.Yellow,
        )
    )
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/0755705b-27bd-5d33-5437-11898d9fb4f3.png"  width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/6199f1bc-aa0a-60b5-2079-62f91f68068b.png"  width="200px"></img>



## 日付カレンダー部分の文字色②

選択させない日の文字色を変更する : `disabledDayContentColor`
選択させない日が選択されてしまっている日の文字色を変更する : `disabledSelectedDayContentColor`


- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
            initialSelectedDateMillis = Date().time,
            selectableDates = object : SelectableDates {
                override fun isSelectableDate(utcTimeMillis: Long): Boolean {
                    return false
                }
            }
        ),
        colors = DatePickerDefaults.colors(
            disabledDayContentColor = Color.Red,
            disabledSelectedDayContentColor = Color.Yellow,
        )
    )
}
```

どの日も選択できなくするが、デフォルトで今日が選択されるようにしている。

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/cc48cb19-fad3-ef83-3376-2a1876e34237.png"  width="200px"></img>

## 日付カレンダー部分の背景色
選択されている日の背景色を変更する : `selectedDayContainerColor`
選択させない年が選択されてしまっている日の背景色を変更する : `disabledSelectedDayContainerColor`
「今日」が選択されていない時の枠線色を変更する : `todayDateBorderColor` .. 「年」選択の時の「今年」の枠線と共通


- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
            // 2024年4月23日を初期選択日とする
            initialSelectedDateMillis = Calendar.getInstance().apply {
                set(2024, 3, 23)
            }.timeInMillis,
            selectableDates = object : SelectableDates {
                override fun isSelectableDate(utcTimeMillis: Long): Boolean {
                    // 偶数日だけ選択可能
                    val c = Calendar.getInstance().apply {
                        time = Date(utcTimeMillis)
                    }

                    return c.get(Calendar.DAY_OF_MONTH) % 2 == 0
                }
            }
        ),
        colors = DatePickerDefaults.colors(
            selectedDayContainerColor = Color.Red,
            disabledSelectedDayContainerColor = Color.Blue,
            todayDateBorderColor = Color.Green,
        )
    )
}
```

偶数日のみ選択可能にするが、デフォルトの選択日は2024/4/23にする。
アプリ起動日は2024/4/21。



- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/7a3dbbe2-7069-ef5f-2bb2-bccc1765124f.png"  width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/4e768566-4e37-6bfa-1adc-9e312e9d6cf9.png"  width="200px"></img>


## 日付カレンダー部分のその他のコンポーネント
「日付の選択」の文字色を変更する : `titleContentColor`
選択された日付を表示している部分の文字色を変更する : `headlineContentColor`
曜日の文字色を変更する : `weekdayContentColor`
「xxxx年xx月」や「<」「>」の文字色を変更する : `navigationContentColor`
「選択された日付」と、「xxxx年xx月」や「<」「>」の間の線の色を変更する : `dividerColor`

- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
        ),
        colors = DatePickerDefaults.colors(
            titleContentColor= Color.Red,
            headlineContentColor= Color.Green,
            weekdayContentColor= Color.Blue,
            navigationContentColor= Color.Magenta,
            dividerColor = Color.Yellow,
        )
    )
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/45bf958f-7154-e4d9-1d50-f44b82dfb89d.png"  width="200px"></img>


# 数字手入力で選択する場合の画面の色を調整したい！
「日付の選択」の文字色を変更する : `titleContentColor` ...カレンダーと共通
選択された日付を表示している部分の文字色を変更する : `headlineContentColor`...カレンダーと共通
「選択された日付」と、「xxxx年xx月」や「<」「>」の間の線の色を変更する : `dividerColor`...カレンダーと共通
入力された日付の文字色や枠線の色を変更する : `dateTextFieldColors` ...一般的な`TextField`と一緒です。`DatePickerDefaults.colors().dateTextFieldColors`のコピーから作成すると楽です。

- コード
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    DatePicker(
        state = rememberDatePickerState(
        ),
        colors = DatePickerDefaults.colors(
            titleContentColor = Color.Red,
            headlineContentColor = Color.Green,
            dividerColor = Color.Yellow,
            dateTextFieldColors = DatePickerDefaults.colors().dateTextFieldColors.copy(
                focusedTextColor = Color.Blue,
                focusedContainerColor = Color.Magenta,
                focusedIndicatorColor = Color.Cyan,
                unfocusedContainerColor = Color.DarkGray,
                unfocusedLabelColor = Color.White,
            ),
        )
    )
}
```

- こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/d18f2778-3fb4-d9f2-ba8a-1c20ad5f0ffa.png"  width="200px"></img>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245217/a68ca720-36c2-8c06-0f59-9447bc76e68d.png"  width="200px"></img>