こんにちは。Android アプリ開発担当の nagayama(@nagayan_dev)です。
今回私が担当している「auサービスToday」で Android 13 対応をしている時に遭遇した、 WebView がダークモードに切り替わらない問題と、その調査・対応した内容についてお伝えしたいと思います。
背景
「auサービスToday」で targetSDK バージョンを 33 にしたところ、アプリの WebView がダークモードに切り替わらない事象が発生しました。例えば、下記の利用規約画面では利用規約の部分を WebView で表示していますが、その WebView がダークモードに切り替わりませんでした。
「auサービスToday」はダークモードに対応をしており、 setForceDark メソッドを用いて WebView のダークモードの切り替えを行なっていました。
動作確認をしたところ、targetSDK バージョンを 33 にして Android 13 の端末で動作を確認すると、setForceDark メソッドが動作していないことが分かりました。
developers サイト
developers サイトでは下記のように記載があります。
- setForceDark メソッドのサポートが終了
- アプリのテーマ属性 isLightTheme に従って、
prefers-color-scheme
を設定するようになった。
・ true or 未設定 →prefers-color-scheme
= ライトテーマ
・ それ以外 ( false ) →prefers-color-scheme
= ダークテーマ - アプリのカラーテーマの動作をカスタマイズする場合は、setAlgorithmicDarkeningAllowed を使用する
WebView のダークモードの切り替えに関して、大きく変更が加わったようです。
表示するページが prefers-color-scheme
に対応しているかどうかとisLightTheme
と setAlgorithmicDarkening
との組み合わせについては こちら に記載されているため、行き詰まった方は参考にされると良いと思います。
実装内容
では developers サイトの内容を元に対応をしてみようと思います。
① アプリテーマ属性 isLightTheme を設定する
まずはアプリテーマ属性 isLightTheme を設定します。「auサービスToday」では未設定だったので、ライト / ダーク それぞれの値を追加しました。
values/themes.xml
<resources xmlns:tools="http://schemas.android.com/tools"> 〜〜〜 <item name="android:isLightTheme" tools:targetApi="Q">true</item> </style> </resources>
values-night/themes.xml
<resources xmlns:tools="http://schemas.android.com/tools"> <item name="android:isLightTheme" tools:targetApi="Q">false</item> </style> </resources>
基本的にこちらの対応のみで WebView のダークモードの切り替えが可能になります。
② setAlgorithmicDarkeningAllowed を使用する
カラーテーマの動作をカスタマイズをする場合の対応内容です。
setAlgorithmicDarkeningAllowed メソッドは webkit のバージョン 1.5.0 以上から使用できるため、対応されたライブラリを設定します。
build.gradle
dependencies { implementation "androidx.webkit:webkit:1.5.0" }
setAlgorithmicDarkeningAllowed
メソッドは API レベル 33 以上から有効であるため、 if 文で判定をします。また setAlgorithmicDarkeningAllowed
が対応しているかどうかを WebViewFeature を用いて判定します。
WebView側
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && WebViewFeature.isFeatureSupported(WebViewFeature.ALGORITHMIC_DARKENING)) { WebSettingsCompat.setAlgorithmicDarkeningAllowed(webview.settings, isDarkMode) }
対応完了後
以上の対応により、無事 WebView のダークモードの切り替えができるようになりました。
まとめ
developers サイトの内容を元に、Android 13 での WebView のダークモードの切り替えの対応を行いました。元々 setForceDark
で動的に対応をしていたところが、基本的に theme.xml
の静的パラメータの指定だけでダークモードを意識せず WebView を使用できるところが大きいと感じました。
余談ですが・・Android 13 対応していた当時、この内容は developers サイトの英語ページにしか書いていなかったため、日本語ページしかチェックしていなかった私は気づくのが遅れてしまいました。今後は英語ページをしっかりチェックしようと思います。