久しぶりに Ionic 開発をすると、画面が黒くてびっくりした話

３年ほどぶりに Ionic を使ってアプリ開発でもしようかな、と、もろもろのソフトウェアを更新してから、いつものとおり「ionic start」とすると、真っ黒のアプリが出来てびっくりしました。

• 

• 

結論から書くと、Ionic が少し前のバージョンから、OSのダークモード設定に合わせてIonicのスタイルシートが切り替わるだけで、従来の白＋青の画面にしたければ、ダークモードの記述部分を消してしまえばOKでした。

修正箇所

/アプリフォルダ/src/theme/variables.scss の@mediaの部分を消してしまえば、従来の白＋青の画面になります。

@media (prefers-color-scheme: dark) {
  /*
   * Dark Colors
   * -------------------------------------------
   */

  body {
（略）
  }

  /*
   * iOS Dark Theme
   * -------------------------------------------
   */

  .ios body {
（略）
  }

  .ios ion-modal {
（略）
  }


  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */

  .md body {
（略）
  }
}

すごく単純なことだったんですが、全然「ダークモード」っていうキーワードに気付けず、「Ionic 黒い」などで検索をかけても全く情報に辿り着けず、丸一日困っていました。

同じことで困っている人が、「Ionic 黒い」で検索にひっかかると良いなと思って、投稿しておきます。