Changing font color in date picker with time selection

Anvil Q&A
1

What I’m trying to do:
Use the date picker with time selection with the dark (Rally) theme.

What I’ve tried and what’s not working:
The time picker container shows white text on white background. I tried changing the background and foreground colors, but they do not affect the time selection fields. White is probably ok as background color to make the boxes stand out, but how to modify the font color?

RallyDatePickerTimeSelectionBackgroundColor
RallyDatePickerTimeSelectionBackgroundColor351×553 13.5 KB

Clone link:
(Anvil | Login)

2

This is my fix for the datepicker, specially for dark mode.

/* DateRangePicker */
.daterangepicker {
    background-color: var(--surface-variant);
    border-color: var(--outline);
}

.daterangepicker .calendar-table {
    background-color: var(--surface-variant);
}

.daterangepicker td.off {
    background-color: var(--disabled-container);
}

.daterangepicker select.hourselect, 
.daterangepicker select.minuteselect, 
.daterangepicker select.secondselect, 
.daterangepicker select.ampmselect,
.daterangepicker select.monthselect, 
.daterangepicker select.yearselect {
    background-color: var(--tertiary-container);
    border-color: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
    color: var(--surface);
    border-color: var(--on-surface);
}

I think this is every needed fix for the daterangepicker.
You can then replace any var(--variable) for the color variable that you want to use. In my CSS it’s like this way because I use user-selected colors.

1 Like
3

Thanks for the tip. For some reason your full code causes the DatePicker to become transparent for me, but the example still allowed me to progress in this. It seems the barest minimum to change the background color of the hour and minute boxes in DatePicker is:

/* DateRangePicker */
.daterangepicker select.hourselect, 
.daterangepicker select.minuteselect
{
    background-color: var(--tertiary-container);
}

However, this (and your code) still leaves the dropdown background color white, with a very poor contrast against gray text. The background on the year month dropdowns is black, which would be ideal also here.

4

Weird…

This is how the DatePicker appears to me with my css changes:
image

Did you change the var(--tertiary-container) to something to your liking?

This works for me because the entire theme colors can be changed by the user.
In your code you probably should use %color:Tertiary Container% or whatever color you prefer.

5

Thanks, I misunderstood you.

The default (white background seems to come from
background-color: %color:On Secondary Container%

In the Rally theme I am using, the background of the DatePicker seems to be %color:Surface Variant%, so adding this fixed my problem:

.daterangepicker select.hourselect, 
.daterangepicker select.minuteselect
{
      background-color: %color:Surface Variant% 
}