有两种方法可以做到这一点,基于您是想仅在单个页面中更改颜色还是想在应用程序的所有页面中更改颜色:
1) 在单个页面/视图中更改
就像您可以在这里看到的那样。
要更改主题,只需调整src/theme/variables.scss
文件中的$colors
映射:
$colors: (
// ...
newcolor:
)
然后在视图中使用它
<ion-header>
<ion-navbar color="newcolor">
<ion-title>
HELLO
</ion-title>
</ion-navbar>
</ion-header>
2)在所有页面/视图中更改它
在这种情况下,您需要在variables.scss
文件中添加以下内容,以覆盖Ionic的默认设置:
$toolbar-ios-background: #55acee;
$toolbar-md-background: #55acee;
$toolbar-wp-background: #55acee;
编辑
您好,我该如何在app/theme/app.variables.scss中添加渐变?
您可以在src/theme/variables.scss
中添加要使用的颜色:
$header-first-color: #AAAAAA;
$header-last-color: #000000;
然后设置一个规则来使用它(如果想将其应用于每个页面,则在您的app.scss
文件中;如果想将其应用于单个页面,则在page-name.scss
文件中):
ion-header {
.toolbar-background {
background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%);
}
}
<ion-navbar color="newcolor">
,因为答案是针对以前的 Ionic 版本的。 - sebaferreras