javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): update default toolbar and tab background to #fff (#16454)

Browse Source 
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.
This commit is contained in:
Brandy Carney
2018-11-26 13:01:56 -05:00
committed by GitHub
parent 429e08344a
commit 12bcb415ee
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/toolbar/test/translucent/index.html
View File

@ -13,8 +13,8 @@
<body> <body>
<ion-app> <ion-app>
<ion-header> <ion-header translucent>
<ion-toolbar translucent> <ion-toolbar>
<ion-title>Toolbar - Translucent</ion-title> <ion-title>Toolbar - Translucent</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -98,8 +98,8 @@
</ion-grid> </ion-grid>
</ion-content> </ion-content>
<ion-footer> <ion-footer translucent>
<ion-toolbar translucent> <ion-toolbar>
<ion-title>Toolbar - Translucent</ion-title> <ion-title>Toolbar - Translucent</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-footer> </ion-footer>

6
core/src/themes/ionic.theme.default.ios.scss
View File

@ -13,15 +13,15 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,
// iOS Tabs & Tab bar // iOS Tabs & Tab bar
// -------------------------------------------------- // --------------------------------------------------
$tabbar-ios-background: var(--ion-tab-bar-background, #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(#f8f8f8)) !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, rgba(0, 0, 0, .2))) !default;
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-550) !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; $tabbar-ios-color-activated: var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
// iOS Toolbar // 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-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: var(--ion-toolbar-color, $text-color) !default;
$toolbar-ios-color-activated: var(--ion-toolbar-color-activated, ion-color(primary, base)) !default; $toolbar-ios-color-activated: var(--ion-toolbar-color-activated, ion-color(primary, base)) !default;

6
core/src/themes/ionic.theme.default.md.scss
View File

@ -14,15 +14,15 @@ $overlay-md-background-color: var(--ion-overlay-background-color,
// Material Design Tabs & Tab bar // Material Design Tabs & Tab bar
// -------------------------------------------------- // --------------------------------------------------
$tabbar-md-background: var(--ion-tab-bar-background, #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(#f8f8f8)) !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-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: 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; $tabbar-md-color-activated: var(--ion-tab-bar-color-activated, ion-color(primary, base)) !default;
// Material Design Toolbar // 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-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: var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default;
$toolbar-md-color-activated: var(--ion-toolbar-color-activated, #4a4a4a) !default; $toolbar-md-color-activated: var(--ion-toolbar-color-activated, #4a4a4a) !default;