はじめに

Cordova iOS アプリで、ダークモード設定時にステータスバーの時刻やら電波マークやらが背景色と同化して見えなくなる場合の対処方法。

TL;DR

  • config.xml に以下を追加
    • 対応としては「ライトモードの強制」なので、本質的な対応ではない
1
2
3
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
<string>Light</string>
</config-file>

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 前提
    2. 本題: iOS ダークモード対応
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.5
BuildVersion: 19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ cordova -v
9.0.0 (cordova-lib@9.0.1)

$ cordova platform
Installed platforms:
ios 5.1.1

$ cordova plugin
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-statusbar 2.4.3 "StatusBar"

詳細

前提

ステータスバーを変更するには apache/cordova-plugin-statusbar を使う。

1
$ cordova plugin add cordova-plugin-statusbar

あとは Preferences を参考に config.xml を編集。

本題: iOS ダークモード対応

参考: comment - iOS 13 dark mode default text colour is white · Issue #148

本質的な対応方法ではないかもしれないが、以下の方法でステータスバー部分の設定をライトモードに固定できる。(iOS デバイスの外観設定がダークモードでも、アプリ起動中はステータスバー部分をライトモード扱いにできる)

config.xml に以下を追加

1
2
3
4
5
6
7
8
9
10
11
12
 <?xml version='1.0' encoding='utf-8'?>
<widget id="foo.bar.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
...
<!-- このあたりはお好みで -->
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="lightcontent" />
+ <config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
+ <string>Light</string>
+ </config-file>
...
</widget>

まとめ

  • config.xml に以下を追加
    • 対応としては「ライトモードの強制」なので、本質的な対応ではない
1
2
3
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
<string>Light</string>
</config-file>

参考文献

関連記事