はじめに

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

TL;DR

  • config.xml に以下を追加
    • 対応としては「ライトモードの強制」なので、本質的な対応ではない
1
2
3
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
  <string>Light</string>
</config-file>
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  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>

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list