I use DatePicker
from material3
with custom colors.
I want to change background color of DatePicker
. As I understand I need to change actually the elevation overlay color of Surface
. But how I can do it?
Here is my code:
@OptIn(ExperimentalMaterial3Api::class)
@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF)
@Composable
fun DatePickerPreview() {
val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Picker)
Surface(
tonalElevation = 6.dp,
contentColor = AppTheme.colors.textSecondary,
modifier = Modifier.padding(16.dp),
shape = MaterialTheme.shapes.extraLarge,
) {
DatePicker(
state = datePickerState,
colors = AppDefaults.datePickerColors(),
dateValidator = {
DateTimeUtils.timestampToDate(it)?.isAfter(Date()) == false
}
)
}
}
But background color of DatePicker now is the default material neutral color. I want to set my custom blue color for it instead of material purple, but with correctly calculated alpha like in material3
. Explanation of material3 tonalElevation
.
The overlay color comes from the primary color slot but I don't use MeterialTheme
for my app, instead of this I use the my custom theme
So, I solved this by locally using of MaterialTheme
from material3
and overriding some colors:
@OptIn(ExperimentalMaterial3Api::class)
@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF)
@Composable
fun DatePickerMaterialTheme() {
val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Picker)
val validate: (Long) -> Boolean = remember { { DateTimeUtils.timestampToDate(it)?.isAfter(Date()) == false } }
MaterialTheme(
colorScheme = MaterialTheme.colorScheme.copy(
surface = AppTheme.colors.surface,
primary = AppTheme.colors.primary,
onPrimary = AppTheme.colors.onPrimary
)
) {
Surface(
tonalElevation = 6.dp,
shape = MaterialTheme.shapes.extraLarge
) {
DatePicker(
state = datePickerState,
dateValidator = validate
)
}
}
}