diff --git a/dev/src/demos/demo-basic.ts b/dev/src/demos/demo-basic.ts
index a9e63a1e1..3ab0747c5 100644
--- a/dev/src/demos/demo-basic.ts
+++ b/dev/src/demos/demo-basic.ts
@@ -23,6 +23,7 @@ export class DemoBasicComponent {
   date: string = '2018-01-01';
   options: CalendarComponentOptions = {
     from: new Date(2000, 0, 1),
+    color: 'color-custom'
   };
 
   constructor(public modalCtrl: ModalController) {
diff --git a/dev/src/demos/demo-modal-range.ts b/dev/src/demos/demo-modal-range.ts
index 531a4b9c2..084fae83a 100644
--- a/dev/src/demos/demo-modal-range.ts
+++ b/dev/src/demos/demo-modal-range.ts
@@ -31,7 +31,8 @@ export class DemoModalRangeComponent {
     const options: CalendarModalOptions = {
       pickMode: 'range',
       title: 'RANGE',
-      defaultDateRange: this.dateRange
+      defaultDateRange: this.dateRange,
+      color: 'color-custom'
     };
 
     let myCalendar = this.modalCtrl.create(CalendarModal, {
diff --git a/dev/src/demos/demo-range.ts b/dev/src/demos/demo-range.ts
index 7ae388ddc..985cfa456 100644
--- a/dev/src/demos/demo-range.ts
+++ b/dev/src/demos/demo-range.ts
@@ -29,7 +29,8 @@ export class DemoRangeComponent {
   };
   options: CalendarComponentOptions = {
     from: new Date(2000, 0, 1),
-    pickMode: 'range'
+    pickMode: 'range',
+    color: 'color-custom'
   };
 
   constructor(public modalCtrl: ModalController) {
diff --git a/dev/src/ion2-calendar/components/calendar-week.component.scss b/dev/src/ion2-calendar/components/calendar-week.component.scss
index c5fd694c8..12a880fac 100644
--- a/dev/src/ion2-calendar/components/calendar-week.component.scss
+++ b/dev/src/ion2-calendar/components/calendar-week.component.scss
@@ -1,5 +1,4 @@
 @import "../functions";
-
 @mixin week-title($background-color: primary, $color: #fff) {
   margin: 0;
   color: $color;
@@ -10,48 +9,30 @@
 }
 
 ion-calendar-week {
-
-  .toolbar-background-md, .toolbar-background-ios {
+  .toolbar-background-md,
+  .toolbar-background-ios {
     background: transparent;
   }
-
   .week-toolbar {
     padding: 0;
   }
-
   .week-toolbar.toolbar-md {
     min-height: 44px;
   }
-
-  .week-title.primary {
-    @include week-title(primary);
-  }
-
-  .week-title.secondary {
-    @include week-title(secondary);
-  }
-
-  .week-title.danger {
-    @include week-title(danger);
-  }
-
-  .week-title.dark {
-    @include week-title(dark);
+  @each $color-name,
+  $color-base,
+  $color-contrast in get-colors($colors) {
+    .week-title.#{$color-name} {
+      @include week-title($color-name, $color-contrast);
+    }
   }
-
-  .week-title.light {
-    @include week-title(light, #9e9e9e);
-  }
-
   .week-title.transparent {
     @include week-title(light, #9e9e9e);
     background-color: transparent;
   }
-
   .week-title.cal-color {
     @include week-title(cal-color);
   }
-
   .week-title li {
     list-style-type: none;
     display: block;
@@ -59,11 +40,8 @@ ion-calendar-week {
     width: 14%;
     text-align: center;
   }
-
-  .week-title li:nth-of-type(7n), .week-title li:nth-of-type(7n+1) {
+  .week-title li:nth-of-type(7n),
+  .week-title li:nth-of-type(7n+1) {
     width: 15%;
   }
-
 }
-
-
diff --git a/dev/src/ion2-calendar/components/month-picker.component.scss b/dev/src/ion2-calendar/components/month-picker.component.scss
index 3fb472b87..57d9ca0bd 100644
--- a/dev/src/ion2-calendar/components/month-picker.component.scss
+++ b/dev/src/ion2-calendar/components/month-picker.component.scss
@@ -1,5 +1,4 @@
 @import "../functions";
-
 @mixin month-picker($background-color: primary, $color: #fff) {
   .month-packer-item {
     &.this-month button {
@@ -15,13 +14,11 @@
 }
 
 ion-calendar-month-picker {
-
   .month-picker {
     margin: 20px 0;
     display: inline-block;
     width: 100%;
   }
-
   .month-packer-item {
     width: 25%;
     box-sizing: border-box;
@@ -36,36 +33,18 @@ ion-calendar-month-picker {
       background-color: transparent;
     }
   }
-
-  .month-picker.primary {
-    @include month-picker(primary);
-  }
-
-  .month-picker.secondary {
-    @include month-picker(secondary);
-  }
-
-  .month-picker.danger {
-    @include month-picker(danger);
-  }
-
-  .month-picker.dark {
-    @include month-picker(dark);
-  }
-
-  .month-picker.light {
-    @include month-picker(light, #9e9e9e);
+  @each $color-name,
+  $color-base,
+  $color-contrast in get-colors($colors) {
+    .month-picker.#{$color-name} {
+      @include month-picker($color-name, $color-contrast);
+    }
   }
-
   .month-picker.transparent {
     @include month-picker(light, #9e9e9e);
     background-color: transparent;
   }
-
   .month-picker.cal-color {
     @include month-picker(cal-color);
   }
-
 }
-
-
diff --git a/dev/src/ion2-calendar/components/month.component.scss b/dev/src/ion2-calendar/components/month.component.scss
index 66cdd2a9b..5a4f0f087 100755
--- a/dev/src/ion2-calendar/components/month.component.scss
+++ b/dev/src/ion2-calendar/components/month.component.scss
@@ -1,100 +1,99 @@
 @import "../functions";
 @mixin transition-property($args...) {
-    -webkit-transition-property: $args;
-    -moz-transition-property: $args;
-    -ms-transition-property: $args;
-    -o-transition-property: $args;
-    transition-property: $args;
+  -webkit-transition-property: $args;
+  -moz-transition-property: $args;
+  -ms-transition-property: $args;
+  -o-transition-property: $args;
+  transition-property: $args;
 }
 
 @mixin transition-duration($args...) {
-    -webkit-transition-duration: $args;
-    -moz-transition-duration: $args;
-    -ms-transition-duration: $args;
-    -o-transition-duration: $args;
-    transition-duration: $args;
+  -webkit-transition-duration: $args;
+  -moz-transition-duration: $args;
+  -ms-transition-duration: $args;
+  -o-transition-duration: $args;
+  transition-duration: $args;
 }
 
 @mixin transition-timing-function($args...) {
-    -webkit-transition-timing-function: $args;
-    -moz-transition-timing-function: $args;
-    -ms-transition-timing-function: $args;
-    -o-transition-timing-function: $args;
-    transition-timing-function: $args;
+  -webkit-transition-timing-function: $args;
+  -moz-transition-timing-function: $args;
+  -ms-transition-timing-function: $args;
+  -o-transition-timing-function: $args;
+  transition-timing-function: $args;
 }
 
 @mixin month-color($background-color: primary, $color: #fff) {
-    button.days-btn small,
-    .days .marked p,
-    .days .today p {
-        color: bindColors($background-color);
-    }
-    .days .today p {
-        font-weight: 700;
-    }
-    .days .last-month-day p,
-    .days .next-month-day p {
-        color: rgba(0, 0, 0, .25);
-    }
-    .days .today.on-selected p,
-    .days .marked.on-selected p {
-        color: $color;
-    }
-    .days .on-selected,
-    .startSelection button.days-btn,
-    .endSelection button.days-btn {
-        background-color: bindColors($background-color);
-        color: $color;
-    }
-    .startSelection {
-        position: relative;
-        &:after {
-            height: 36px;
-            width: 50%;
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            display: block;
-            background-color: lighten(bindColors($background-color), 12%);
-        }
-    }
-    .endSelection {
-        position: relative;
-        &:after {
-            height: 36px;
-            width: 50%;
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: block;
-            background-color: lighten(bindColors($background-color), 12%);
-        }
+  button.days-btn small,
+  .days .marked p,
+  .days .today p {
+    color: bindColors($background-color);
+  }
+  .days .today p {
+    font-weight: 700;
+  }
+  .days .last-month-day p,
+  .days .next-month-day p {
+    color: rgba(0, 0, 0, .25);
+  }
+  .days .today.on-selected p,
+  .days .marked.on-selected p {
+    color: $color;
+  }
+  .days .on-selected,
+  .startSelection button.days-btn,
+  .endSelection button.days-btn {
+    background-color: bindColors($background-color);
+    color: $color;
+  }
+  .startSelection {
+    position: relative;
+    &:after {
+      height: 36px;
+      width: 50%;
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: block;
+      background-color: lighten(bindColors($background-color), 12%);
     }
-    .startSelection.endSelection {
-        &:after {
-            background-color: transparent;
-        }
+  }
+  .endSelection {
+    position: relative;
+    &:after {
+      height: 36px;
+      width: 50%;
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      background-color: lighten(bindColors($background-color), 12%);
     }
-    .startSelection button.days-btn {
-        border-radius: 50%
+  }
+  .startSelection.endSelection {
+    &:after {
+      background-color: transparent;
     }
-    .between button.days-btn {
-        background-color: lighten(bindColors($background-color), 12%);
-        width: 100%;
-        border-radius: 0;
-        p {
-            color: $color;
-        }
+  }
+  .startSelection button.days-btn {
+    border-radius: 50%
+  }
+  .between button.days-btn {
+    background-color: lighten(bindColors($background-color), 12%);
+    width: 100%;
+    border-radius: 0;
+    p {
+      color: $color;
     }
-    .endSelection button.days-btn {
-        border-radius: 50%;
-        p {
-            color: $color;
-        }
+  }
+  .endSelection button.days-btn {
+    border-radius: 50%;
+    p {
+      color: $color;
     }
-
+  }
   .days.startSelection:nth-child(7n):after,
   .days.between:nth-child(7n) button.days-btn,
   button.days-btn.is-last {
@@ -103,13 +102,11 @@
       border-radius: 50%
     }
   }
-
   .days.endSelection:nth-child(7n+1):after,
   .days.between:nth-child(7n+1) button.days-btn,
   button.days-btn.is-first {
     border-radius: 36px 0 0 36px;
   }
-
   .startSelection button.days-btn.is-first,
   .endSelection button.days-btn.is-first,
   button.days-btn.is-first.on-selected,
@@ -118,109 +115,95 @@
   .endSelection button.days-btn.is-last {
     border-radius: 50%
   }
-
   .startSelection.is-last-wrap {
     &::after {
       border-radius: 0 36px 36px 0;
     }
   }
-
   .endSelection.is-first-wrap {
     &::after {
       border-radius: 36px 0 0 36px;
     }
   }
-
   .days .on-selected p {
-        color: $color;
-    }
-    .startSelection,
-    .endSelection,
-    .between {
-        button.days-btn {
-            @include transition-property(background-color);
-            @include transition-duration(180ms);
-            @include transition-timing-function(ease-out);
-        }
+    color: $color;
+  }
+  .startSelection,
+  .endSelection,
+  .between {
+    button.days-btn {
+      @include transition-property(background-color);
+      @include transition-duration(180ms);
+      @include transition-timing-function(ease-out);
     }
+  }
 }
 
 ion-calendar-month {
-    display: inline-block;
-    width: 100%;
-    .days-box {
-        padding: 0.5rem;
-    }
-    .days:nth-of-type(7n),
-    .days:nth-of-type(7n+1) {
-        width: 15%;
-    }
-    .days {
-        width: 14%;
-        float: left;
-        text-align: center;
-        height: 36px;
-        margin-bottom: 5px;
-    }
-    .days .marked p {
-        font-weight: 500;
-    }
-    .days .on-selected {
-        border: none;
-        p {
-            font-size: 1.3em;
-        }
-    }
-    button.days-btn {
-        border-radius: 36px;
-        width: 36px;
-        display: block;
-        margin: 0 auto;
-        padding: 0;
-        height: 36px;
-        background-color: transparent;
-        position: relative;
-        z-index: 2;
-    }
-    button.days-btn p {
-        margin: 0;
-        font-size: 1.2em;
-        color: #333;
-    }
-    button.days-btn.on-selected small {
-        transition: bottom .3s;
-        bottom: -14px;
-    }
-    button.days-btn small {
-        overflow: hidden;
-        display: block;
-        left: 0;
-        right: 0;
-        bottom: -5px;
-        position: absolute;
-        z-index: 1;
-        text-align: center;
-        font-weight: 200;
-    }
-    .primary {
-        @include month-color();
-    }
-    .secondary {
-        @include month-color(secondary);
-    }
-    .danger {
-        @include month-color(danger);
-    }
-    .dark {
-        @include month-color(dark);
-    }
-    .light {
-        @include month-color(light, #a0a0a0);
-        .days .today p {
-            color: #565656;
-        }
+  display: inline-block;
+  width: 100%;
+  .days-box {
+    padding: 0.5rem;
+  }
+  .days:nth-of-type(7n),
+  .days:nth-of-type(7n+1) {
+    width: 15%;
+  }
+  .days {
+    width: 14%;
+    float: left;
+    text-align: center;
+    height: 36px;
+    margin-bottom: 5px;
+  }
+  .days .marked p {
+    font-weight: 500;
+  }
+  .days .on-selected {
+    border: none;
+    p {
+      font-size: 1.3em;
     }
-    .cal-color {
-        @include month-color(cal-color);
+  }
+  button.days-btn {
+    border-radius: 36px;
+    width: 36px;
+    display: block;
+    margin: 0 auto;
+    padding: 0;
+    height: 36px;
+    background-color: transparent;
+    position: relative;
+    z-index: 2;
+  }
+  button.days-btn p {
+    margin: 0;
+    font-size: 1.2em;
+    color: #333;
+  }
+  button.days-btn.on-selected small {
+    transition: bottom .3s;
+    bottom: -14px;
+  }
+  button.days-btn small {
+    overflow: hidden;
+    display: block;
+    left: 0;
+    right: 0;
+    bottom: -5px;
+    position: absolute;
+    z-index: 1;
+    text-align: center;
+    font-weight: 200;
+  }
+  @each $color-name,
+  $color-base,
+  $color-contrast in get-colors($colors) {
+    .#{$color-name} {
+      @include month-color($color-name, $color-contrast);
     }
+  }
+  .cal-color {
+    @include month-color(cal-color);
+  }
 }
diff --git a/dev/src/theme/variables.scss b/dev/src/theme/variables.scss
index 18276a461..d8468c0de 100644
--- a/dev/src/theme/variables.scss
+++ b/dev/src/theme/variables.scss
@@ -38,7 +38,8 @@ $colors: (
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,
-  dark:       #222
+  dark:       #222,
+  color-custom: #207B45,
 );
 
 
diff --git a/package.json b/package.json
index b73fc3c16..1207e148b 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "typings": "./dist/index.d.ts",
   "scripts": {
     "start": "cd ./dev && ionic serve",
+    "start-code": "cd ./dev && ionic serve --port 8101 --livereload-port 53704 --dev-logger-port 53704",
     "clean:dist": "rm -rf dist",
     "demo:link": "npm link && cd ./demo && npm link ion2-calendar",
     "demo:serve": "cd ./demo && ionic serve",
diff --git a/src/components/calendar-week.component.scss b/src/components/calendar-week.component.scss
index c5fd694c8..12a880fac 100644
--- a/src/components/calendar-week.component.scss
+++ b/src/components/calendar-week.component.scss
@@ -1,5 +1,4 @@
 @import "../functions";
-
 @mixin week-title($background-color: primary, $color: #fff) {
   margin: 0;
   color: $color;
@@ -10,48 +9,30 @@
 }
 
 ion-calendar-week {
-
-  .toolbar-background-md, .toolbar-background-ios {
+  .toolbar-background-md,
+  .toolbar-background-ios {
     background: transparent;
   }
-
   .week-toolbar {
     padding: 0;
   }
-
   .week-toolbar.toolbar-md {
     min-height: 44px;
   }
-
-  .week-title.primary {
-    @include week-title(primary);
-  }
-
-  .week-title.secondary {
-    @include week-title(secondary);
-  }
-
-  .week-title.danger {
-    @include week-title(danger);
-  }
-
-  .week-title.dark {
-    @include week-title(dark);
+  @each $color-name,
+  $color-base,
+  $color-contrast in get-colors($colors) {
+    .week-title.#{$color-name} {
+      @include week-title($color-name, $color-contrast);
+    }
   }
-
-  .week-title.light {
-    @include week-title(light, #9e9e9e);
-  }
-
   .week-title.transparent {
     @include week-title(light, #9e9e9e);
     background-color: transparent;
   }
-
   .week-title.cal-color {
     @include week-title(cal-color);
   }
-
   .week-title li {
     list-style-type: none;
     display: block;
@@ -59,11 +40,8 @@ ion-calendar-week {
     width: 14%;
     text-align: center;
   }
-
-  .week-title li:nth-of-type(7n), .week-title li:nth-of-type(7n+1) {
+  .week-title li:nth-of-type(7n),
+  .week-title li:nth-of-type(7n+1) {
     width: 15%;
   }
-
 }
-
-
diff --git a/src/components/month-picker.component.scss b/src/components/month-picker.component.scss
index 3fb472b87..57d9ca0bd 100644
--- a/src/components/month-picker.component.scss
+++ b/src/components/month-picker.component.scss
@@ -1,5 +1,4 @@
 @import "../functions";
-
 @mixin month-picker($background-color: primary, $color: #fff) {
   .month-packer-item {
     &.this-month button {
@@ -15,13 +14,11 @@
 }
 
 ion-calendar-month-picker {
-
   .month-picker {
     margin: 20px 0;
     display: inline-block;
     width: 100%;
   }
-
   .month-packer-item {
     width: 25%;
     box-sizing: border-box;
@@ -36,36 +33,18 @@ ion-calendar-month-picker {
       background-color: transparent;
     }
   }
-
-  .month-picker.primary {
-    @include month-picker(primary);
-  }
-
-  .month-picker.secondary {
-    @include month-picker(secondary);
-  }
-
-  .month-picker.danger {
-    @include month-picker(danger);
-  }
-
-  .month-picker.dark {
-    @include month-picker(dark);
-  }
-
-  .month-picker.light {
-    @include month-picker(light, #9e9e9e);
+  @each $color-name,
+  $color-base,
+  $color-contrast in get-colors($colors) {
+    .month-picker.#{$color-name} {
+      @include month-picker($color-name, $color-contrast);
+    }
   }
-
   .month-picker.transparent {
     @include month-picker(light, #9e9e9e);
     background-color: transparent;
   }
-
   .month-picker.cal-color {
     @include month-picker(cal-color);
   }
-
 }
-
-
diff --git a/src/components/month.component.scss b/src/components/month.component.scss
index 66cdd2a9b..5a4f0f087 100755
--- a/src/components/month.component.scss
+++ b/src/components/month.component.scss
@@ -1,100 +1,99 @@
 @import "../functions";
 @mixin transition-property($args...) {
-    -webkit-transition-property: $args;
-    -moz-transition-property: $args;
-    -ms-transition-property: $args;
-    -o-transition-property: $args;
-    transition-property: $args;
+  -webkit-transition-property: $args;
+  -moz-transition-property: $args;
+  -ms-transition-property: $args;
+  -o-transition-property: $args;
+  transition-property: $args;
 }
 
 @mixin transition-duration($args...) {
-    -webkit-transition-duration: $args;
-    -moz-transition-duration: $args;
-    -ms-transition-duration: $args;
-    -o-transition-duration: $args;
-    transition-duration: $args;
+  -webkit-transition-duration: $args;
+  -moz-transition-duration: $args;
+  -ms-transition-duration: $args;
+  -o-transition-duration: $args;
+  transition-duration: $args;
 }
 
 @mixin transition-timing-function($args...) {
-    -webkit-transition-timing-function: $args;
-    -moz-transition-timing-function: $args;
-    -ms-transition-timing-function: $args;
-    -o-transition-timing-function: $args;
-    transition-timing-function: $args;
+  -webkit-transition-timing-function: $args;
+  -moz-transition-timing-function: $args;
+  -ms-transition-timing-function: $args;
+  -o-transition-timing-function: $args;
+  transition-timing-function: $args;
 }
 
 @mixin month-color($background-color: primary, $color: #fff) {
-    button.days-btn small,
-    .days .marked p,
-    .days .today p {
-        color: bindColors($background-color);
-    }
-    .days .today p {
-        font-weight: 700;
-    }
-    .days .last-month-day p,
-    .days .next-month-day p {
-        color: rgba(0, 0, 0, .25);
-    }
-    .days .today.on-selected p,
-    .days .marked.on-selected p {
-        color: $color;
-    }
-    .days .on-selected,
-    .startSelection button.days-btn,
-    .endSelection button.days-btn {
-        background-color: bindColors($background-color);
-        color: $color;
-    }
-    .startSelection {
-        position: relative;
-        &:after {
-            height: 36px;
-            width: 50%;
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            display: block;
-            background-color: lighten(bindColors($background-color), 12%);
-        }
-    }
-    .endSelection {
-        position: relative;
-        &:after {
-            height: 36px;
-            width: 50%;
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: block;
-            background-color: lighten(bindColors($background-color), 12%);
-        }
+  button.days-btn small,
+  .days .marked p,
+  .days .today p {
+    color: bindColors($background-color);
+  }
+  .days .today p {
+    font-weight: 700;
+  }
+  .days .last-month-day p,
+  .days .next-month-day p {
+    color: rgba(0, 0, 0, .25);
+  }
+  .days .today.on-selected p,
+  .days .marked.on-selected p {
+    color: $color;
+  }
+  .days .on-selected,
+  .startSelection button.days-btn,
+  .endSelection button.days-btn {
+    background-color: bindColors($background-color);
+    color: $color;
+  }
+  .startSelection {
+    position: relative;
+    &:after {
+      height: 36px;
+      width: 50%;
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: block;
+      background-color: lighten(bindColors($background-color), 12%);
     }
-    .startSelection.endSelection {
-        &:after {
-            background-color: transparent;
-        }
+  }
+  .endSelection {
+    position: relative;
+    &:after {
+      height: 36px;
+      width: 50%;
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      background-color: lighten(bindColors($background-color), 12%);
     }
-    .startSelection button.days-btn {
-        border-radius: 50%
+  }
+  .startSelection.endSelection {
+    &:after {
+      background-color: transparent;
     }
-    .between button.days-btn {
-        background-color: lighten(bindColors($background-color), 12%);
-        width: 100%;
-        border-radius: 0;
-        p {
-            color: $color;
-        }
+  }
+  .startSelection button.days-btn {
+    border-radius: 50%
+  }
+  .between button.days-btn {
+    background-color: lighten(bindColors($background-color), 12%);
+    width: 100%;
+    border-radius: 0;
+    p {
+      color: $color;
     }
-    .endSelection button.days-btn {
-        border-radius: 50%;
-        p {
-            color: $color;
-        }
+  }
+  .endSelection button.days-btn {
+    border-radius: 50%;
+    p {
+      color: $color;
     }
-
+  }
   .days.startSelection:nth-child(7n):after,
   .days.between:nth-child(7n) button.days-btn,
   button.days-btn.is-last {
@@ -103,13 +102,11 @@
       border-radius: 50%
     }
   }
-
   .days.endSelection:nth-child(7n+1):after,
   .days.between:nth-child(7n+1) button.days-btn,
   button.days-btn.is-first {
     border-radius: 36px 0 0 36px;
   }
-
   .startSelection button.days-btn.is-first,
   .endSelection button.days-btn.is-first,
   button.days-btn.is-first.on-selected,
@@ -118,109 +115,95 @@
   .endSelection button.days-btn.is-last {
     border-radius: 50%
   }
-
   .startSelection.is-last-wrap {
     &::after {
       border-radius: 0 36px 36px 0;
     }
   }
-
   .endSelection.is-first-wrap {
     &::after {
       border-radius: 36px 0 0 36px;
     }
   }
-
   .days .on-selected p {
-        color: $color;
-    }
-    .startSelection,
-    .endSelection,
-    .between {
-        button.days-btn {
-            @include transition-property(background-color);
-            @include transition-duration(180ms);
-            @include transition-timing-function(ease-out);
-        }
+    color: $color;
+  }
+  .startSelection,
+  .endSelection,
+  .between {
+    button.days-btn {
+      @include transition-property(background-color);
+      @include transition-duration(180ms);
+      @include transition-timing-function(ease-out);
     }
+  }
 }
 
 ion-calendar-month {
-    display: inline-block;
-    width: 100%;
-    .days-box {
-        padding: 0.5rem;
-    }
-    .days:nth-of-type(7n),
-    .days:nth-of-type(7n+1) {
-        width: 15%;
-    }
-    .days {
-        width: 14%;
-        float: left;
-        text-align: center;
-        height: 36px;
-        margin-bottom: 5px;
-    }
-    .days .marked p {
-        font-weight: 500;
-    }
-    .days .on-selected {
-        border: none;
-        p {
-            font-size: 1.3em;
-        }
-    }
-    button.days-btn {
-        border-radius: 36px;
-        width: 36px;
-        display: block;
-        margin: 0 auto;
-        padding: 0;
-        height: 36px;
-        background-color: transparent;
-        position: relative;
-        z-index: 2;
-    }
-    button.days-btn p {
-        margin: 0;
-        font-size: 1.2em;
-        color: #333;
-    }
-    button.days-btn.on-selected small {
-        transition: bottom .3s;
-        bottom: -14px;
-    }
-    button.days-btn small {
-        overflow: hidden;
-        display: block;
-        left: 0;
-        right: 0;
-        bottom: -5px;
-        position: absolute;
-        z-index: 1;
-        text-align: center;
-        font-weight: 200;
-    }
-    .primary {
-        @include month-color();
-    }
-    .secondary {
-        @include month-color(secondary);
-    }
-    .danger {
-        @include month-color(danger);
-    }
-    .dark {
-        @include month-color(dark);
-    }
-    .light {
-        @include month-color(light, #a0a0a0);
-        .days .today p {
-            color: #565656;
-        }
+  display: inline-block;
+  width: 100%;
+  .days-box {
+    padding: 0.5rem;
+  }
+  .days:nth-of-type(7n),
+  .days:nth-of-type(7n+1) {
+    width: 15%;
+  }
+  .days {
+    width: 14%;
+    float: left;
+    text-align: center;
+    height: 36px;
+    margin-bottom: 5px;
+  }
+  .days .marked p {
+    font-weight: 500;
+  }
+  .days .on-selected {
+    border: none;
+    p {
+      font-size: 1.3em;
     }
-    .cal-color {
-        @include month-color(cal-color);
+  }
+  button.days-btn {
+    border-radius: 36px;
+    width: 36px;
+    display: block;
+    margin: 0 auto;
+    padding: 0;
+    height: 36px;
+    background-color: transparent;
+    position: relative;
+    z-index: 2;
+  }
+  button.days-btn p {
+    margin: 0;
+    font-size: 1.2em;
+    color: #333;
+  }
+  button.days-btn.on-selected small {
+    transition: bottom .3s;
+    bottom: -14px;
+  }
+  button.days-btn small {
+    overflow: hidden;
+    display: block;
+    left: 0;
+    right: 0;
+    bottom: -5px;
+    position: absolute;
+    z-index: 1;
+    text-align: center;
+    font-weight: 200;
+  }
+  @each $color-name,
+  $color-base,
+  $color-contrast in get-colors($colors) {
+    .#{$color-name} {
+      @include month-color($color-name, $color-contrast);
     }
+  }
+  .cal-color {
+    @include month-color(cal-color);
+  }
 }