How to theme?

[gaharrington]

Is there any documentation for how to color/theme the datetimepickers?

[hexadecy]

Redefine some background and color and include them in a .css after material-datetimepicker.css

.dtp table.dtp-picker-days tr > td > a.selected {
    background: blue;
}

.dtp table.dtp-picker-days tr > td > a.selected.hilite {
    background: blue;
    color: red;
}

.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected) {
    color: red;
}

.dtp div.dtp-year-btn {
    color: red;
}

.dtp div.dtp-date, .dtp div.dtp-time {
    background: blue;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: blue;
}

.dtp .dtp-picker-time > a.dtp-select-hour.selected {
    background: blue;
}

.dtp .dtp-actual-meridien a.selected {
    background: red;
}

.dtp .dtp-hand.on {
    background: red;
}

.dtp div.dtp-actual-year {
    color: red;
}

[gaharrington]

I used your approach successfully. Thank you @hexadecy!

I restructured it slightly, for simpler maintenance in my custom .css:

.dtp table.dtp-picker-days tr > td > a.selected,
.dtp table.dtp-picker-days tr > td > a.selected.hilite,
.dtp div.dtp-date, .dtp div.dtp-time,
.dtp > .dtp-content > .dtp-date-view > header.dtp-header,
.dtp .dtp-picker-time > a.dtp-select-hour.selected {
    background: #5A2B83;
}

.dtp table.dtp-picker-days tr > td > a.selected.hilite,
.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected),
.dtp div.dtp-year-btn,
.dtp div.dtp-actual-year {
    color: #8D5EB6;
}

.dtp .dtp-actual-meridien a.selected,
.dtp .dtp-hand.on {
    background: #8D5EB6;
}

I would like to contribute a solution that is easier to override and documented. Would you accept a pull request for that contribution?

My first thought is to restructure the css usage to include classes:

.dtp-color-primary
.dtp-color-secondary

Would do you think of that approach?

[hexadecy]

Yes you can submit a PR here .dtp-primary-color .dtp-accent-color

[hexadecy]

Since 1.8.1, change color when selecting hours, minutes or seconds.

.dtp table.dtp-picker-days tr > td > a.selected,
.dtp table.dtp-picker-days tr > td > a.selected.hilite,
.dtp div.dtp-date, .dtp div.dtp-time, .dtp .dtp-hand.on,
.dtp .dtp-actual-meridien a.selected,
.dtp .dtp-picker-time > a.dtp-select-hour.selected {
    background: #2abab9;
}

.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected),
.dtp div.dtp-actual-time.p60 span.selected {
    color: #2abab9;
}

.dtp div.dtp-year-btn, .dtp div.dtp-actual-year, .dtp div.dtp-actual-maxtime {
    color: #d0f0f0;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: #009796;
}