diff --git a/core/src/components/toolbar/test/translucent/index.html b/core/src/components/toolbar/test/translucent/index.html
index 31e4d1a124..d03a0a2ec8 100644
--- a/core/src/components/toolbar/test/translucent/index.html
+++ b/core/src/components/toolbar/test/translucent/index.html
@@ -13,8 +13,8 @@
-
-
+
+
Toolbar - Translucent
@@ -98,8 +98,8 @@
-
-
+
+
Toolbar - Translucent
diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index 79976ad788..210d7733dd 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -13,15 +13,15 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,
// iOS Tabs & Tab bar
// --------------------------------------------------
-$tabbar-ios-background: var(--ion-tab-bar-background, #f8f8f8) !default;
-$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#f8f8f8)) !default;
+$tabbar-ios-background: var(--ion-tab-bar-background, #fff) !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-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, #f8f8f8) !default;
+$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-color: var(--ion-toolbar-color, $text-color) !default;
$toolbar-ios-color-activated: var(--ion-toolbar-color-activated, ion-color(primary, base)) !default;
diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
index 8404aa79a1..09c91766a7 100644
--- a/core/src/themes/ionic.theme.default.md.scss
+++ b/core/src/themes/ionic.theme.default.md.scss
@@ -14,15 +14,15 @@ $overlay-md-background-color: var(--ion-overlay-background-color,
// Material Design Tabs & Tab bar
// --------------------------------------------------
-$tabbar-md-background: var(--ion-tab-bar-background, #f8f8f8) !default;
-$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#f8f8f8)) !default;
+$tabbar-md-background: var(--ion-tab-bar-background, #fff) !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;
$tabbar-md-color-activated: var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
// Material Design Toolbar
// --------------------------------------------------
-$toolbar-md-background: var(--ion-toolbar-background, #f8f8f8) !default;
+$toolbar-md-background: var(--ion-toolbar-background, #fff) !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;