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：我发现create()有一个cssClass选项所以我试过：

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

我明白了：

您可以覆盖theme/variables.scss ionic theme/variables.scss 。 在theme/variables.scss ：

$backdrop-color:#002559;//<-- I add in this.

它有效。 转到此链接以查看要更改的所有变量。