Css ionic2-更改加载屏幕的颜色

我在应用程序中的许多页面上使用

LoadingController

。我想做一些定制，使它与设计和品牌的作品。我想改变：

背景色

去掉包含文本的白色框

使用我自己的旋转器

我发现背景在

离子背景

中，白盒容器在

装入包装

，

装入ios

（如果在ios中）。 因此，我在

app.scss

中添加了代码：

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

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

但什么也没发生。我该怎么做

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

更新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();
}

presentLoadingCustom（）{
让加载=this.loadingCtrl.create({
微调器：“隐藏”，
//背景：错，
cssClass：`
.自定义微调器容器{
背景#445566；
} 
`,
内容：`
装填
`,
持续时间：20000
});
正在加载.ondiddisclesh（（）=>{
console.log（‘卸载’）；
});
loading.present（）；
}

但我有一个错误：

./LoadingCmp类LoadingCmp_主机-内联模板中出错：0:0 原因：字符串包含无效字符

在这种情况下如何执行

css

我想：

您可以覆盖

theme/variables.scss

的

ionic

变量。在

主题/变量.scss

中：

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

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

$background color:#002559//