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

投稿者: | 2021/10/13

3年ほどぶりに 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 黒い」で検索にひっかかると良いなと思って、投稿しておきます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください