Gunosy Tech Blog

Gunosy Tech Blogは株式会社Gunosyのエンジニアが知見を共有する技術ブログです。

WebView でダークモードに切り替わらない ( Android 13 対応 )

こんにちは。Android アプリ開発担当の nagayama(@nagayan_dev)です。
今回私が担当している「auサービスToday」で Android 13 対応をしている時に遭遇した、 WebView がダークモードに切り替わらない問題と、その調査・対応した内容についてお伝えしたいと思います。

背景

「auサービスToday」で targetSDK バージョンを 33 にしたところ、アプリの WebView がダークモードに切り替わらない事象が発生しました。例えば、下記の利用規約画面では利用規約の部分を WebView で表示していますが、その WebView がダークモードに切り替わりませんでした。

未対応時の WebView のダークモードの切り替え

「auサービスToday」はダークモードに対応をしており、 setForceDark メソッドを用いて WebView のダークモードの切り替えを行なっていました。

動作確認をしたところ、targetSDK バージョンを 33 にして Android 13 の端末で動作を確認すると、setForceDark メソッドが動作していないことが分かりました


developers サイト

developers サイトでは下記のように記載があります。

developer.android.com

  1. setForceDark メソッドのサポートが終了
  2. アプリのテーマ属性 isLightTheme に従って、prefers-color-scheme を設定するようになった。
    ・ true or 未設定 → prefers-color-scheme = ライトテーマ
    ・ それ以外 ( false ) → prefers-color-scheme = ダークテーマ
  3. アプリのカラーテーマの動作をカスタマイズする場合は、setAlgorithmicDarkeningAllowed を使用する

WebView のダークモードの切り替えに関して、大きく変更が加わったようです。
表示するページが prefers-color-scheme に対応しているかどうかとisLightThemesetAlgorithmicDarkening との組み合わせについては こちら に記載されているため、行き詰まった方は参考にされると良いと思います。

実装内容

では 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 のダークモードの切り替えができるようになりました。

対応後の WebView のダークモード

まとめ

developers サイトの内容を元に、Android 13 での WebView のダークモードの切り替えの対応を行いました。元々 setForceDark で動的に対応をしていたところが、基本的に theme.xml の静的パラメータの指定だけでダークモードを意識せず WebView を使用できるところが大きいと感じました。

余談ですが・・Android 13 対応していた当時、この内容は developers サイトの英語ページにしか書いていなかったため、日本語ページしかチェックしていなかった私は気づくのが遅れてしまいました。今後は英語ページをしっかりチェックしようと思います。