WebView のウェブ コンテンツを暗くする

Android 10 以降では、アプリは ダークモード: 自動的に システムテーマに応じて、ライトモードとダークモードの切り替えを行います。目標に合わせて 現在のアプリのテーマ、WebView のウェブ コンテンツ ライトモード、ダークモード、デフォルトのスタイルを使用できます。

WebView の動作は、既存の WebView との prefers-color-scheme および color-scheme サポートしています。可能な限り、ユーザーが希望するウェブ コンテンツを作成して ダークモードを定義する必要があります。 ウェブサイトと prefers-color-scheme を実装して、WebView がウェブ コンテンツの アプリのテーマに合わせることができます。

次の表に、WebView がアプリ内のウェブ コンテンツをレンダリングする仕組みを示します。 ウェブ コンテンツのスタイルとアプリの条件によって異なります。

アプリの条件 prefers-color-scheme を使用するウェブ コンテンツ prefers-color-scheme を使用していないウェブ コンテンツ
アプリはライトモードを使用しています isLightTheme true に設定するか未設定のままにしてください。 WebView は、表示中のライトテーマでコンテンツをレンダリングします。 コンテンツの作成者が定義した値。 WebView は、 コンテンツの作成者です。
アプリが次を使用しています フォースダーク から アルゴリズムによってダークモードを適用する クリックします。 WebView は、指定されたダークモードでコンテンツをレンダリングします。 コンテンツの作成者が定義した値。 コンテンツ作成者が許可している場合、WebView は ダークモードです。
アプリがダークモードを使用しています: isLightTheme false に設定されていて、アプリがアルゴリズムを許可しない場合 ダークモードです。 WebView は、指定されたダークモードでコンテンツをレンダリングします。 コンテンツの作成者が定義した値。 WebView は、 コンテンツの作成者です。
アプリがダークモードを使用しています: isLightTheme false に設定されていて、アプリが許可している WebView のアルゴリズムによるダークニング。 WebView は、指定されたダークモードでコンテンツをレンダリングします。 コンテンツの作成者が定義した値。 コンテンツ作成者が許可している場合、WebView は ダークモードです。

コンテンツ作成者のスタイル設定

アプリの isLightTheme 属性 アプリのテーマがライトモードかダークモードかを示します。WebView が常に設定される isLightThemeによると prefers-color-scheme。isLightTheme が true の場合 指定しない場合、prefers-color-scheme は light です。それ以外の場合は dark。

つまり、ウェブ コンテンツで prefers-color-scheme が使用されており、 作成者が許可した場合、コンテンツ作成者が定義したライトモードまたはダークモード は、アプリのテーマに合わせて常にウェブ コンテンツに自動的に適用されます。

アルゴリズムによるダークニング

ウェブ コンテンツで prefers-color-scheme アプリは、必要に応じて WebView が、アルゴリズムによってダークカラーを適用できるようにする 表示されるウェブ コンテンツに応じて自動的に設定されます。

アプリがアプリレベルの フォースダークをアルゴリズムに基づいて アプリにダークモードを適用する方法については、次のセクションで フォースダークで、ウェブ コンテンツのアルゴリズムによるダークニングを許可します。

アプリでフォースダークを使用していない場合は、許可するタイミングを指定する方法 WebView のアルゴリズムによるダークニングは、 対象 API レベル。 Android 13 以降をターゲットとするアプリについては、以下のセクションをご覧ください。 Android 12 以前をターゲットとするアプリをご覧ください。

フォースダークでウェブ コンテンツに対してアルゴリズムによるダークニングを許可する

アプリがアプリレベルの フォースダーク、WebView が適用される 次の条件が満たされると、アルゴリズムによってウェブ コンテンツが暗くなります。

  • WebView とその親要素ではフォースダークを利用できます。
  • 現在のアクティビティ テーマはライトのマークが付き、 isLightTheme を次に設定しました: true。
  • ウェブ コンテンツの作成者はダークニングを明示的に無効にしていません。
  • Android 13（API レベル 33）以降をターゲットとするアプリの場合、ウェブ コンテンツは prefers-color-scheme を使用しません。
  • Android 12（API レベル 32）以下をターゲットとするアプリの場合: アプリが WebView の forceDarkMode 設定 から FORCE_DARK_AUTO フォースダーク戦略は DARK_STRATEGY_USER_AGENT_DARKENING_ONLY。

WebView とそのすべての親は、 View.setForceDarkAllowed()。 デフォルト値は、次の属性の setForceDarkAllowed() 属性から取得されます。 Android テーマ。true にも設定する必要があります。

強制ダークモードは、主に以下の状態のアプリでの下位互換性を確保するために提供されています。 独自のダークモードを提供しないでください。 アプリでフォースダークを使用する場合は、 ダークモードのサポートを追加するをご覧ください。

アルゴリズムによるダークニングを許可する（Android 13 以降をターゲットとするアプリ）

アプリレベルのフォースダークを使用せず、Android 13（API レベル）をターゲットとするアプリの場合 33）以降では、AndroidX を使用してください。 setAlgorithmicDarkeningAllowed() メソッドを使用して、WebView でアルゴリズムの使用を許可することを指定する true を渡します。 暗くなります。このメソッドには以前の Android と下位互換性があります あります。

WebView では、次の条件が満たされると、アルゴリズムによるダークニングが適用されます。

  • ウェブ コンテンツでは prefers-color-scheme を使用していません。
  • ウェブ コンテンツの作成者はダークニングを明示的に無効にしていません。

アルゴリズムによるダークニングを許可する（Android 12 以前をターゲットとするアプリ）

アプリレベルのフォースダークを使用せず、Android 12（API レベル）をターゲットとするアプリの場合 32）以下を使用する場合は、 FORCE_DARK_ON アルゴリズムによるダークニングが可能になります。

FORCE_DARK_ON を次と一緒に使用する FORCE_DARK_OFF ライトモードとダークモードを切り替える独自の方法をアプリで提供している場合は、 たとえば、UI の切り替え可能な要素や、時間ベースの自動選択などです。

この機能がサポートされているかどうかを確認するには、次のコード行を追加します。 WebView オブジェクトを構成している場所（Activity.onCreate 内など）は、

Kotlin

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(...)
}

Java

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(...);
}

アプリがシステム環境設定の変更を検出することに依存している場合は、 明示的にリッスンし、それらを WebView に適用します。 FORCE_DARK_ON 状態と FORCE_DARK_OFF 状態。

次のコード スニペットは、テーマの形式を変更する方法を示しています。

Kotlin

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
        Configuration.UI_MODE_NIGHT_YES -> {
            WebSettingsCompat.setForceDark(myWebView.settings, FORCE_DARK_ON)
        }
        Configuration.UI_MODE_NIGHT_NO, Configuration.UI_MODE_NIGHT_UNDEFINED -> {
            WebSettingsCompat.setForceDark(myWebView.settings, FORCE_DARK_OFF)
        }
        else -> {
            //
        }
    }
}

Java

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
        case Configuration.UI_MODE_NIGHT_YES:
            WebSettingsCompat.setForceDark(myWebView.getSettings(), FORCE_DARK_ON);
            break;
        case Configuration.UI_MODE_NIGHT_NO:
        case Configuration.UI_MODE_NIGHT_UNDEFINED:
            WebSettingsCompat.setForceDark(myWebView.getSettings(), FORCE_DARK_OFF);
            break;
    }
}

ダークモードの処理をカスタマイズする

また、 ForceDarkStrategy API を使用して、特定の WebView にダークモードを適用する方法を制御します。この API は、 フォースダークが FORCE_DARK_ON または FORCE_DARK_AUTO に設定されている場合にのみ適用されます。

API を使用すると、アプリはウェブテーマのダーク化またはユーザー エージェントのいずれかを使用できます。 ダークニング:

  • ウェブテーマのダーク化: ウェブ デベロッパーが、 @media (prefers-color-scheme: dark)でウェブページの表示を制御 ダークモードに切り替わります。WebView は、これらの設定に従ってコンテンツをレンダリングします。詳細については、 ウェブテーマのダークモードについては、 仕様をご覧ください。
  • ユーザー エージェントのダークニング: WebView でウェブの色を自動的に反転できます。 できます。ユーザー エージェント ダークニングを使用すると、 @media (prefers-color-scheme: dark) クエリは false と評価されます。

2 つの戦略のいずれかを選択するには、次の API を使用します。

Kotlin

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(...)
}

Java

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(...);
}

サポートされている戦略オプションは次のとおりです。

  • <ph type="x-smartling-placeholder"></ph> DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING: これがデフォルトのオプションです。ほとんどのブラウザでは <meta name="color-scheme" content="dark light"> タグ（省略可）、Android WebView のデフォルト モードでは、メタタグにウェブページの prefers-color-scheme 件のメディアクエリ。WebView は <ph type="x-smartling-placeholder"></ph> DARK_STRATEGY_WEB_THEME_DARKENING_ONLY モードです。この場合 WebView は、タグが設定されていても常にメディアクエリを適用します。 省略されます。

    ただし、ウェブ デベロッパーの方には ウェブサイトに <meta name="color-scheme" content="dark light"> タグを追加して WebView でコンテンツが正しくレンダリングされるよう、 できます。

  • <ph type="x-smartling-placeholder"></ph> DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: これを「user-agent ダークニング」と呼びます。WebView は、ウェブページを暗くして 自動ダークモードを適用します。

prefers-color-scheme 個のメディアクエリ、推奨 DARK_STRATEGY_WEB_THEME_DARKENING_ONLY WebView でカスタムテーマが使用されるようにします。

ダークモードを適用した例については、 GitHub の WebView デモ