color theme (dark)

Put CSS to the stylesData option like below. It is also possible to create a new color theme based on the template below. Change any style defined here.

Color themes:

• grey
• blue
• green
• red
• yellow
• dark

Other

• bold styles

Try above color themes here.

<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" 
    #dp="angular-mydatepicker">

import {IAngularMyDpOptions} from 'angular-mydatepicker';

export class MyApp {
    myDatePickerOptions: IAngularMyDpOptions = {
      stylesData: {
        selector: 'dp1',
        styles: `
          .dp1 .myDpIconLeftArrow,
          .dp1 .myDpIconRightArrow,
          .dp1 .myDpHeaderBtn {
            color: #fff;
          }
          .dp1 .myDpHeaderBtn:focus,
          .dp1 .myDpMonthLabel:focus,
          .dp1 .myDpYearLabel:focus {
            color: #66afe9;
          }
          .dp1 .myDpDaycell:focus,
          .dp1 .myDpMonthcell:focus,
          .dp1 .myDpYearcell:focus {
            box-shadow: inset 0 0 0 1px #66afe9;
          }
          .dp1 .myDpSelector:focus {
            box-shadow: -1px 1px 6px 0px #ADD8E6;
          }
          .dp1 .myDpSelectorArrow:after {
            border-color: rgba(108, 117, 125, 0);
            border-bottom-color: #6c757d;
          }
          .dp1 .myDpSelectorArrow:focus:before {
            border-bottom-color: #ADD8E6;
          }
          .dp1 .myDpCurrMonth,
          .dp1 .myDpMonthcell,
          .dp1 .myDpYearcell {
            color: #fff;
            font-weight: bold;
          }
          .dp1 .myDpDaycellWeekNbr {
            color: #fff;
            background-color: #6c757d;
          }
          .dp1 .myDpPrevMonth,
          .dp1 .myDpNextMonth {
            color: #bbb;
          }
          .dp1 .myDpWeekDayTitle {
            background-color: #6c757d;
            color: #fff;
            font-weight: bold;
          }
          .dp1 .myDpHeaderBtnEnabled:hover,
          .dp1 .myDpMonthLabel:hover,
          .dp1 .myDpYearLabel:hover,
          .dp1 .myDpFooterBtn:hover {
            color: #ddd;
          }
          .dp1 .myDpMarkCurrDay, 
          .dp1 .myDpMarkCurrMonth, 
          .dp1 .myDpMarkCurrYear {
            border-bottom: 2px solid #fff;
          }
          .dp1 .myDpTableSingleDay:hover, 
          .dp1 .myDpTableSingleMonth:hover, 
          .dp1 .myDpTableSingleYear:hover {
            background-color: #ddd;
            color: #000;
            font-weight: bold;
          }
          .dp1 .myDpDaycell,
          .dp1 .myDpMonthcell,
          .dp1 .myDpYearcell {
            background-color: #6c757d;
          }
          .dp1 .myDpRangeColor {
            background-color: #aaa;
            color: #fff;
          }
          .dp1 .myDpSelectedDay,
          .dp1 .myDpSelectedMonth,
          .dp1 .myDpSelectedYear {
            background-color: #aaa;
            color: #fff;
            font-weight: bold;
            box-shadow: inset 0 0 0 1px #fff;
          }
          .dp1 .myDpSelector,
          .dp1 .myDpMonthYearSelBar,
          .dp1 .myDpFooterBar {
            background-color: #6c757d;
          }
          .dp1 .myDpDisabled {
            color: #fff;
            background: repeating-linear-gradient(-45deg, #6c757d 7px, #d3d3d3 8px, transparent 7px, transparent 14px);
          }
          .dp1 .myDpHighlight {
            color: 	#960018;
          }
         `
      }
        // other options here
    }

    constructor() {}
}