我有这个问题…我的颜色现在是白色的,我的代码是这样的：
- <ion-header >
- <ion-navbar>
- <ion-title>
- HELLO
- </ion-title>
- </ion-navbar>
- </ion-header>
使用此选项更改颜色很容易(主要,次要,危险,光线,黑暗)
- <ion-header >
- <ion-navbar danger>
- <ion-title>
- HELLO
- </ion-title>
- </ion-navbar>
- </ion-header>
但我的问题是当我想使用自定义颜色时.
有人知道如何解决它？
提前致谢.
最好的祝福.
解决方法
有两种方法可以执行此操作,具体取决于您是只想在一个页面中更改颜色,还是要在应用程序的所有页面中更改颜色：
1)在单页/视图中更改它
就像你可以看到here
To change the theme,just tweak the
$colorsmap in your
src/theme/variables.scssfile:
- $colors: (
- // ...
- newcolor: #55acee
- )
然后在视图中使用它
- <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;
编辑
Hi,how can I add gradient in 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%);
- }
- }
