From 12bcb415ee8f3d379f1ded7579fd6ae8c8f8505f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 26 Nov 2018 13:01:56 -0500 Subject: [PATCH] fix(themes): update default toolbar and tab background to #fff (#16454) fixes #16384 BREAKING CHANGES The default background color for the Toolbar and Tab Bar is now white (#fff). This can be changed by overriding the following CSS variables: ``` --ion-toolbar-background --ion-tab-bar-background --ion-tab-bar-background-focused ``` See https://beta.ionicframework.com/docs/theming/css-variables for more information. --- core/src/components/toolbar/test/translucent/index.html | 8 ++++---- core/src/themes/ionic.theme.default.ios.scss | 6 +++--- core/src/themes/ionic.theme.default.md.scss | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) 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;