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

但我得到的错误：

Error in ./LoadingCmp class LoadingCmp_Host - inline template:0:0 caused by: The string contains invalid characters.

如何做这个css案件？

Answer 1

我弄明白：

您可以覆盖的theme/variables.scssionic变量。在theme/variables.scss：

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

它工作。请转至this link以检出您想要更改的所有变量。