diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index cf7e4d37d1..33f2c10897 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -39,34 +39,63 @@ ion-segment {
 
   ion-segment {
     margin: 0 auto;
+
+    ion-segment-button[button][outline].activated {
+      background-color: transparent;
+    }
   }
 
 }
 
-// Generate Default Button Colors
+// Generate Default Segment Colors
 // --------------------------------------------------
 
-@each $color, $value in $colors {
+@mixin segment-button($button-color) {
+  background-color: transparent;
 
-  ion-segment[#{$color}] {
-
-    ion-segment-button[button] {
-      $bg-color: $value;
-      $text-color: inverse($bg-color);
+  &[outline] {
+    color: $button-color;
 
+    &.activated {
       background-color: transparent;
-      color: $text-color;
+      color: $button-color;
+      border-color: $button-color;
+      opacity: 1;
+    }
+  }
+}
 
-      &[outline] {
-        color: $bg-color;
+// Loop through all of the colors to change the segment colors
+// based on the toolbar color or if it isn't in a toolbar then based on
+// the segment color value
+@each $color-name, $color-value in $colors {
+  $inverse-color-value: inverse($color-value);
 
-        &.activated {
-          opacity: 1;
-          color: $bg-color;
-          border-color: $bg-color;
+  .toolbar[#{$color-name}] {
+
+    ion-segment {
+      ion-segment-button[button] {
+        @include segment-button($inverse-color-value);
+      }
+    }
+
+    // Loop through all of the colors again to change the segment colors
+    // for each toolbar based on the segment color
+    // this will take priority over the default toolbar colors
+    @each $color-name, $color-value in $colors {
+      ion-segment[#{$color-name}] {
+        ion-segment-button[button] {
+          @include segment-button($color-value);
         }
       }
     }
 
   }
+
+  ion-segment[#{$color-name}] {
+    ion-segment-button[button] {
+      @include segment-button($color-value);
+    }
+
+  }
 }
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index eb34e622a2..aba6b1d080 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -82,16 +82,44 @@
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
 </ion-content>
 
-<ion-toolbar position="bottom">
-  <ion-segment [(ng-model)]="appType" primary>
+<ion-toolbar position="bottom" primary>
+  <ion-segment [(ng-model)]="appType">
     <ion-segment-button value="paid">
-      Paid
+      Primary
     </ion-segment-button>
     <ion-segment-button value="free">
-      Free
+      Toolbar
     </ion-segment-button>
     <ion-segment-button value="top" class="e2eSegmentTopGrossing">
-      Top Grossing
+      Default Segment
+    </ion-segment-button>
+  </ion-segment>
+</ion-toolbar>
+
+<ion-toolbar position="bottom" light>
+  <ion-segment [(ng-model)]="appType" primary>
+    <ion-segment-button value="paid">
+      Light
+    </ion-segment-button>
+    <ion-segment-button value="free">
+      Toolbar
+    </ion-segment-button>
+    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+      Primary Segment
+    </ion-segment-button>
+  </ion-segment>
+</ion-toolbar>
+
+<ion-toolbar position="bottom" light>
+  <ion-segment [(ng-model)]="appType">
+    <ion-segment-button value="paid">
+      Light
+    </ion-segment-button>
+    <ion-segment-button value="free">
+      Toolbar
+    </ion-segment-button>
+    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+      Default Segment
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>
diff --git a/tsconfig.json b/tsconfig.json
index a8863898df..529e4f5610 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,5 +13,6 @@
         "!./scripts/**",
         "!./dist/**",
         "!./tmp/**"
-    ]
+    ],
+    "compileOnSave" : false
 }