如何在Jetpack Compose中修改DatePicker Dialog的颜色？

你当前使用的是原生Android的DatePickerDialog，在Compose环境下可以通过两种方式修改其颜色：

方法一：自定义样式修改原生DatePickerDialog #

直接给原生DatePickerDialog指定自定义样式，覆盖颜色相关属性：

1. 在res/values/styles.xml中添加自定义样式：

<style name="CustomDatePickerDialog" parent="Theme.MaterialComponents.Light.Dialog">
    <!-- 标题文字颜色 -->
    <item name="android:titleTextColor">#FF4081</item>
    <!-- 选中日期的高亮颜色 -->
    <item name="colorAccent">#FF4081</item>
    <!-- 确认/取消按钮文字颜色 -->
    <item name="colorPrimary">#FF4081</item>
    <!-- 日历头部背景色 -->
    <item name="android:headerBackground">#FFE0F2</item>
    <!-- 普通日期文字颜色 -->
    <item name="android:textColorPrimary">#333333</item>
    <!-- 禁用日期文字颜色 -->
    <item name="android:textColorSecondary">#999999</item>
</style>

2. 修改DatePickerDialog的构造代码，传入自定义样式：

val datePickerDialog = DatePickerDialog(
    context,
    R.style.CustomDatePickerDialog, // 传入自定义样式
    { _: DatePicker, year: Int, month: Int, dayOfMonth: Int ->
        onDateChange("$dayOfMonth/${month + 1}/$year", day, month, year)
    }, year, month, day
)

方法二：改用Compose适配的MaterialDatePicker（推荐） #

原生DatePickerDialog和Compose的兼容性有限，更推荐使用Material库提供的MaterialDatePicker，它更贴合Compose生态，自定义样式更灵活：

实现代码： #

val calendar = Calendar.getInstance()
val datePickerState = rememberDatePickerState(
    initialSelectedDateMillis = calendar.timeInMillis
)

CustomInputField(
    isFocused = isInputFocused,
    placeholder = "Your Birthday ",
    currentValue = state.date,
    onClick = {
        onPickerStateChange(BirthDayPickerState.BIRTHDAY)
        showMaterialDatePicker(datePickerState, context)
    }
)

// 封装显示日期选择器的逻辑
@Composable
fun showMaterialDatePicker(datePickerState: DatePickerState, context: Context) {
    val datePicker = MaterialDatePicker.Builder.datePicker()
        .setTitleText("Select Birthday")
        .setSelection(datePickerState.selectedDateMillis)
        .setTheme(R.style.CustomMaterialDatePicker) // 绑定自定义样式
        .build()

    datePicker.show((context as Activity).supportFragmentManager, "DATE_PICKER_TAG")

    // 处理选择结果
    datePicker.addOnPositiveButtonClickListener { selectedDate ->
        val selectedCalendar = Calendar.getInstance().apply { timeInMillis = selectedDate }
        val day = selectedCalendar.get(Calendar.DAY_OF_MONTH)
        val month = selectedCalendar.get(Calendar.MONTH) + 1
        val year = selectedCalendar.get(Calendar.YEAR)
        onDateChange("$day/$month/$year", day, month - 1, year)
    }
}

对应的自定义样式（res/values/styles.xml）： #

<style name="CustomMaterialDatePicker" parent="ThemeOverlay.Material3.MaterialDatePicker">
    <!-- 主色调（按钮、选中日期） -->
    <item name="colorPrimary">#FF4081</item>
    <!-- 主色调文字颜色 -->
    <item name="colorOnPrimary">#FFFFFF</item>
    <!-- 对话框背景色 -->
    <item name="colorSurface">#FFFFFF</item>
    <!-- 普通文字颜色 -->
    <item name="colorOnSurface">#333333</item>
    <!-- 选中日期的高亮颜色 -->
    <item name="materialDatePickerSelectionColor">#FF4081</item>
    <!-- 标题文字颜色 -->
    <item name="android:titleTextColor">#FF4081</item>
</style>

内容的提问来源于stack exchange，提问作者NewPartizal