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 デモ