diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index 210d7733dd..f82b86bbdf 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -7,22 +7,22 @@
 // iOS General Colors
 // --------------------------------------------------
 $backdrop-ios-color:                        var(--ion-backdrop-color, #000) !default;
-$border-ios-color:                          var(--ion-border-color, #dedede) !default;
+$border-ios-color:                          var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
 $box-shadow-ios-color:                      var(--ion-box-shadow-color, #000) !default;
-$overlay-ios-background-color:              var(--ion-overlay-background-color, #f9f9f9) !default;
+$overlay-ios-background-color:              var(--ion-overlay-background-color, var(--ion-color-step-150, #f9f9f9)) !default;
 
 // iOS Tabs & Tab bar
 // --------------------------------------------------
-$tabbar-ios-background:                     var(--ion-tab-bar-background, #fff) !default;
+$tabbar-ios-background:                     var(--ion-tab-bar-background, $background-color) !default;
 $tabbar-ios-background-focused:             var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
-$tabbar-ios-border-color:                   var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, .2))) !default;
+$tabbar-ios-border-color:                   var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
 $tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-550) !default;
 $tabbar-ios-color-activated:                var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
 
 // iOS Toolbar
 // --------------------------------------------------
-$toolbar-ios-background:                    var(--ion-toolbar-background, #fff) !default;
-$toolbar-ios-border-color:                  var(--ion-toolbar-border-color, var(--ion-border-color, rgba(0, 0, 0, .2))) !default;
+$toolbar-ios-background:                    var(--ion-toolbar-background, var(--ion-color-step-50, #fff)) !default;
+$toolbar-ios-border-color:                  var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
 $toolbar-ios-color:                         var(--ion-toolbar-color, $text-color) !default;
 $toolbar-ios-color-activated:               var(--ion-toolbar-color-activated, ion-color(primary, base)) !default;
 
@@ -30,5 +30,5 @@ $toolbar-ios-color-activated:               var(--ion-toolbar-color-activated, i
 // --------------------------------------------------
 $item-ios-background:                       var(--ion-item-background, $background-color) !default;
 $item-ios-background-activated:             var(--ion-item-background-activated, #d9d9d9) !default;
-$item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, #c8c7cc)) !default;
+$item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, #c8c7cc))) !default;
 $item-ios-color:                            var(--ion-item-color, $text-color) !default;
diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
index 09c91766a7..692917b16b 100644
--- a/core/src/themes/ionic.theme.default.md.scss
+++ b/core/src/themes/ionic.theme.default.md.scss
@@ -8,13 +8,13 @@
 // Material Design General Colors
 // --------------------------------------------------
 $backdrop-md-color:                         var(--ion-backdrop-color, #000) !default;
-$border-md-color:                           var(--ion-border-color, #c1c4cd) !default;
+$border-md-color:                           var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
 $box-shadow-md-color:                       var(--ion-box-shadow-color, #000) !default;
 $overlay-md-background-color:               var(--ion-overlay-background-color, #fff) !default;
 
 // Material Design Tabs & Tab bar
 // --------------------------------------------------
-$tabbar-md-background:                      var(--ion-tab-bar-background, #fff) !default;
+$tabbar-md-background:                      var(--ion-tab-bar-background, $background-color) !default;
 $tabbar-md-background-focused:              var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
 $tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, .07))) !default;
 $tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-400) !default;
@@ -22,7 +22,7 @@ $tabbar-md-color-activated:                 var(--ion-tab-bar-color-activated, i
 
 // Material Design Toolbar
 // --------------------------------------------------
-$toolbar-md-background:                     var(--ion-toolbar-background, #fff) !default;
+$toolbar-md-background:                     var(--ion-toolbar-background, $background-color) !default;
 $toolbar-md-border-color:                   var(--ion-toolbar-border-color, $border-md-color) !default;
 $toolbar-md-color:                          var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default;
 $toolbar-md-color-activated:                var(--ion-toolbar-color-activated, #4a4a4a) !default;
@@ -31,5 +31,5 @@ $toolbar-md-color-activated:                var(--ion-toolbar-color-activated, #
 // --------------------------------------------------
 $item-md-background:                        var(--ion-item-background, $background-color) !default;
 $item-md-background-activated:              var(--ion-item-background-activated, #f1f1f1) !default;
-$item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, rgba(0, 0, 0, .13))) !default;
+$item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
 $item-md-color:                             var(--ion-item-color, $text-color) !default;