How to change default body color of materialize datetimepicker?

Question

You can find the entire code here http://codepen.io/anon/pen/BjqxOq

I am displaying a login form using Materialize CSS which you can see in the above Codepen. It has two buttons Login and Register. When Register is clicked a modal is displayed containing necessary registration fields and one of it is materialize datetimepicker.

Is there a possibility to change the default body color of datetimepicker?

HTML

<div class="row">
    <div class="input-field col s6">Date of Birth
        <input type="date" class="datepicker ">
    </div>
</div>

JS

$(document).ready(function(){
    $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year
    });
});

Answer 1

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; }