Date Picker CSS, OK/Cancel Buttons - Change Text OR Background Color

[LoganMHawkins]

Hi all, have an app we’re building for a client and they have requested full-black as their app color as it matches their branding. Not too difficult with CSS, as we’ve been easily able to change some colors for text and buttons across the app. The only thing I have not been able to change is the Date Picker buttons text color or background color within any Glide custom CSS settings.

I’m not too familiar with CSS, trying with GPT knowledge, I’ve tried looking for the selector I would call to modify the buttons, but the Date Selector buttons seem to be under multiple selectors (or another term I am not sure of)… And I can’t get multiple or even one selector changing either buttons.

Any help would be awesome! I’ll attach an example of what it looks like right now, and what it should ideally look like with the text color fixed / white using the inspector below. Thanks in advance!

[ThinhDinh]

#app-modal-root .picker-container .datetime-picker-controls button {
color: white;
}

button[class*="MuiPickersDay-daySelected"] p {
color: white;
}

I noticed the chosen date’s color is black as well, it should be white, so I added a second snippet to change it to white.

[LoganMHawkins]

@ThinhDinh Appreciate the speedy reply! Tried implementing this, and it seems to only want to work in preview mode and not when compiling. Any suggestions?

[Sekayi_Liburd]

Disable/turn off “Use Compiled CSS” from now on so that your app can use the code.

[LoganMHawkins]

@Sekayi_Liburd Amazing. I must have missed the “Turn that off” memo … Appreciate the help to a newbie! Many thanks guys!

[ThinhDinh]

My pleasure to help!

We have a library, so you can find stuff you need here.

CSS Library