katemihalikova / ion-datetime-picker

Date and/or time picker for awesome Ionic framework
MIT License
169 stars 101 forks source link

Customize Colors of Datepicker #96

Open Bratkartoffl opened 7 years ago

Bratkartoffl commented 7 years ago

Ist ist possible to customize the color of the Datepicker elements? By default they are blue, but i want to have them Green as well as the OK Button. How can I achieve this?

katemihalikova commented 7 years ago

Hi, yeah, it would be nice to be able to change colors using sass variables, just as ionic allows. Let's file this as enhancement for the next version 👍

For now, you can use simple sass (or css) cascade to use your colors:

.ion-datetime-picker {
  .calendar .day {
    &:hover, &.activated, &.today:hover, &.today.activated {
      background-color: #bdf;
    }
    &.today {
      background-color: #e4e4e4;
    }
    &.selected, &.selected:hover, &.selected.activated {
      background-color: #387ef5;
      color: white;
    }
    &.disabled, &.disabled:hover, &.disabled.activated {
      background-color: #ccc;
    }
  }
  .month-year .item-input input.ng-invalid {
    background-color: #ffe4ea;
  }
  .time {
    .colon {
      color: #999;
    }
    .item-input input.ng-invalid {
      background-color: #ffe4ea;
    }
  }
}