Ionic 5 在 iOS 上设置可折叠 header 颜色

Question

我的应用 UI 很复杂，所以我举了一个例子来说明我的问题。在 Ionic 5 上，我直接从官方 docs

获取了这段代码

<ion-header translucent="true">
  <ion-toolbar>   
    <ion-buttons collapse="true" slot="end">
      <ion-button>Click Me</ion-button>
    </ion-buttons> 
    <ion-title>Settings</ion-title>               
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">              
    <ion-toolbar>      
      <ion-buttons collapse="true" slot="end">
        <ion-button>Click Me</ion-button>
      </ion-buttons>
      <ion-title size="large">Settings</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  ...

</ion-content>

如果我按照 <ion-toolbar color="primary"> 这样的方式设置工具栏的颜色，我会得到这样的结果

如何设置彩色工具栏上方 space 的颜色？

Answer 1

也有同样的问题，从 global.scss 控制我所有的工具栏 css 以设置背景颜色：

ion-toolbar {
  background: var(--ion-color-primary) !important;
}

在哪里 --ion-color-primary 是我想要的颜色

Ionic 5 在 iOS 上设置可折叠 header 颜色

Ionic 5 set collapsable header color on iOS

css

angular

ionic-framework

ionic5