ionic2 - 改变加载屏幕的颜色

Question

我在我的应用中使用LoadingController许多页面。我想做一些定制，以便它与设计和品牌一起使用。我想改变：

1. 背景颜色。
2. 摆脱包含文字的白框。
3. 使用我自己的微调器。

我发现背景位于ion-backdrop，而白框容器位于loading-wrapper，loading-ios（如果是在iOS中）。 所以我在app.scss中添加了代码：

.ion-backdrop{
  background: rgba(0,20,0,.5);
}
.loading-ios, .loading-wrapper{
  background: rgba(0,0,0,0);
}

但没有任何事情发生。我怎样才能做到这一点？

如何使用我们自己的图形更改微调器？

更新01： 我发现cssClass有create()个选项，所以我尝试了：

presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    // showBackdrop: false,
    cssClass:`
    .custom-spinner-container{
      background:#445566;
    } 
    `,
    content: `
       <div class="custom-spinner-container">
        <div class="custom-spinner-box">loading somethung</div>
      </div>
      `,
    duration: 20000
  });

  loading.onDidDismiss(() => {
    console.log('Dismissed loading');
  });

  loading.present();
}

但我收到了错误：

  

./LoadingCmp类中的错误LoadingCmp_Host - 内联模板：0：0   由：字符串包含无效字符。

在这种情况下如何处理css？

Answer 1

我明白了：

您可以覆盖ionic的{​​{1}}个变量。在theme/variables.scss：

theme/variables.scss

它有效。转到this link以查看要更改的所有变量。