Ionic 特定のページの背景色を変更する方法（ion-contentの色）

ion-contentの背景色の変更、Ionic初心者は恐らくこうやっている。

home.page.html

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>
      ホーム
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="home">

</ion-content>

home.page.scss

.home {
  background-color: #fff5cc;
}

でもこれではうまくいかないんですよ〜！

ion-contentの背景色を変更する方法

※このやり方がベストなのかは分かりませんが、とりあえずこの方法でもできたので。。

variables.scssに値を追加

variables.scssのroot内にこちらを追加

variables.scss

/** Ionic CSS Variables **/
:root {
/** 省略 **/
--ion-background-color:#ffffff;
}

背景色を変更したいページのscssに値を追加

home.page.scss

ion-content{
    --ion-background-color:#fcfde8;
}

これでhome.pageだけ背景色が変わる！

全てのページの背景色を変更するには？

variables.scssを以下のようにして、上記の例のように各ページで一切上書きしなければ、全てのページの背景色を変更可能

variables.scss

/** Ionic CSS Variables **/
:root {
/** 省略 **/
--ion-background-color:#000000;
}

参考