软件准备

# 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');
    }
  }
}

制作安卓应用程序

通过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启动后，连接模拟器或真机进行功能验证。