web-dev-qa-db-ja.com

AndroidでWebViewを使用して、prefers-color-schemeで動作させる：dark

Android webviewを使用するアプリがあり、最近、新しい@media (prefers-color-scheme: dark) CSS構文を使用して暗いテーマを追加する方法を見つけようとしています。私のページに書かれたCSSを修正し、ChromeのダークモードChromeをオンにして）で開いた場合、動作します。また、AppThemeは_Theme.AppCompat.DayNight_を継承しており、デバイスのOS全体でダークモードをオンにすると、アプリにダークロードダイアログなどが表示されます。_<input>_要素のオートコンプリートオプションもダーク。しかし、それでも、私のwebviewでロードされたwebページは暗くなりません。 this page によると、webviewはこの機能をサポートしているはずですが、機能しないだけです。 ？

また、API 29にはこのWebSettings.setForceDark()メソッドがあることもわかりました。それは私が探しているものでしょうか？ただし、より低いAPIレベルで機能するソリューションを見つけたいと思っています。

ちなみに、私の現在の回避策は、次のようなJavaScriptインターフェイスを挿入することです。

_webView.addJavascriptInterface(new JSInterface(), "jsInterface");

...

public class JSInterface {
    @JavascriptInterface
    public boolean isNightMode() {
        int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
        return nightModeFlags == Configuration.UI_MODE_NIGHT_YES;
    }
}
_

次に、私のWebページでjsInterface.isNightMode()メソッドを呼び出し、結果に基づいて異なるCSSファイルを動的にロードします。それは確かに機能し、必要に応じてグローバルダークモード設定に応答しますが、_prefers-color-scheme_を機能させることができるかどうかはまだ疑問です。

androidcssandroid-studioandroid-webviewandroid-night-mode
11
Mu-Tsun Tsai

あなたの質問コードに基づいて私がすることは、現在のステータスに基づいて強制することです：

_int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
  webSettings.setForceDark(WebSettings.FORCE_DARK_ON);
}
_

このように@media (prefers-color-scheme: dark)は機能しますが、@media (prefers-color-scheme: light)は機能しません（他で_FORCE_DARK_OFF_および_FORCE_DARK_AUTO_を使用して試してください）

3
jcesarmobile

ここには関連する2つのドキュメントがあります。

https://developer.Android.com/guide/topics/ui/look-and-feel/darktheme#force_dark

https://developer.Android.com/reference/Android/view/View.html#setForceDarkAllowed（boolean）

重要なポイントは

  1. WebViewは、フォースダークを許可する必要があり、そのすべての親も許可する必要があります。
  2. テーマはライトとしてマークする必要があります。

つまり、FORCE_DARK_AUTOの動作をWebViewで機能させるのは少し複雑です。以下をAppCompat.DayNightテーマに追加することは機能しますが、Android WebView以外のビューに暗を強制する可能性があるため、おそらく最善の解決策ではありません。

<item name="Android:forceDarkAllowed">true</item>
<item name="Android:isLightTheme">true</item>

もう1つのオプションは、関連する構成変更に基づいてFORCE_DARK_ON/OFFを設定することにより、これを手動で処理することです。

現在のところWebViewは、prefer-color-scheme標準化の前にforce darkが実装されていたため、および一部は（スタイルフラッシュなしで）強制的にdarkと統合する方法がないため、prefers-color-schemeをサポートしていません。その意図は、androidx.webkitを使用して、強制的に暗くするか、prefers-color-schemeを選択する機能を提供することです。

2
Tobias Sargeant

WebViewは、prefers-color-scheme CSSメディアクエリをまだ受け入れていないと思います。

SetForceDarkの新しいAPIには、オン、オフ、自動の3つの状態があります。

オン-コンテンツは常に暗くレンダリングされます。

オフ-コンテンツは常に明るく表示されます。

自動-アプリのテーマが暗い場合、コンテンツは暗く表示されますORユーザーがOSレベルスイッチまたはバッテリーセーバーモードをオンに切り替えているため、デバイスのOSは暗いモードです。

古いバージョンのAndroidのサポートと、WebViewのforce darkの代わりにprefers-color-schemeを使用するかどうかの制御もAndroidX経由で近日中に予定されています。現在、期限は不明です。

ここでは、WebViewをsetForceDark Autoに設定することをお勧めします。これはAndroid Q以上で動作します。

Android P以下のデバイスでサポートする必要がある残りのサポートについては、AndroidXのリリースノートに注目します。

1
cmd