Skip to content
This repository has been archived by the owner on Jan 19, 2022. It is now read-only.

Customize Colors of Datepicker #96

Open
Bratkartoffl opened this issue Jan 11, 2017 · 1 comment
Open

Customize Colors of Datepicker #96

Bratkartoffl opened this issue Jan 11, 2017 · 1 comment

Comments

@Bratkartoffl
Copy link

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
Copy link
Owner

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants