How to change default body color of materialize datetimepicker?

The materializecss datepicker has a div with a class called "picker__box". If you set the background-color for this class, your datepicker will assume this color, as you can see in below codepen.

    background-color: #CCC;


To change the upper half body color too, you have to set background-color for two more classes:

.picker__date-display, .picker__weekday-display{
    background-color: #CCC;

I hope this helps!

I have noticed that some answers are not working I have searched a bit and this is the result. Change your CSS file according to this. I have added all the text below feel free to copy.

Hope it helps...

.picker__date-display { background-color: #6d4e7a; }
.picker__day.picker__day--today { color: red; }
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background-color: #6d4e7a;}
.picker__close { color: #6d4e7a !important;}
.picker__today { color: #6d4e7a !important;}
.clockpicker-tick:hover { background: #6d4e7a !important; }
.clockpicker-canvas line { stroke: #6d4e7a !important; }
.clockpicker-canvas-bearing { fill: #6d4e7a !important; }
.clockpicker-canvas-bg { fill: #6d4e7a !important; }

enter image description here

EDIT: This doesn't change the body, but everything but the body, and let the body white

Cant comment.

Allan Pereira solution didn't work for me, everything went to my color (even the white-background).

I used this

    .picker__date-display, .picker__weekday-display{
        background-color: rgba(66, 133, 244, 0.79);

    div.picker__day.picker__day--infocus.picker__day--selected.picker__day--highlighted {
        background-color: rgba(66, 133, 244, 0.79);

    button.picker__today, button.picker__close {
        color: rgba(66, 133, 244, 0.79);

(color is a nice blue)

edit: codepen: