ionicでダークモード対応アプリ作成

ソフトウェア準備

# Angularバージョンアップ
npm uninstall -g @angular/cli
npm install -g @angular/cli

# ionicバージョンアップ
npm uninstall -g @ionic/cli
npm install -g @ionic/cli

Android　Studioをダウンロードしてインストール
https://developer.android.com/studio

ionicサンプルアプリ作成

# サンプルアプリ作成
ionic start ionic-darkmode blank

ダークモード切替処理実装

VSCodeを起動する。

cd ionic-darkmode

# VSCode起動
code.

app.components.ts にダークモード切替処理を実装する。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor() {}
  ngOnInit(): void {
      // メディアクエリーのchangeイベントリスナーに切替処理を登録
      const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      darkModeMediaQuery.addEventListener('change', this.handleDarkModeChange);
  }

  /**
   * ダークモード切替処理
   */
  handleDarkModeChange(e: any) {
    if (e.matches) {
      document.body.setAttribute('color-theme', 'dark');
    } else {
      document.body.setAttribute('color-theme', 'light');
    }
  }
}

Androidアプリ作成

ionicのコマンドで、Androidアプリ機能を付加して、Android Studioを起動する。

cd ionic-darkmode

# 前回のビルドで生成されたファイルを削除
rm -rf android
rm -rf www

# Androidアプリ属性付与
ionic cap add android

# Androidアプリのビルド
ionic cap build android

Android Studioが起動したら
エミュレータもしくは実機接続して動作検証する。