Разрешение WebView на Android работать с prefers-color-scheme: dark

Android Webview обрабатывает дневной / ночной режим немного иначе, чем остальные виды. Установка темной темы изменит компоненты WebView (полоса прокрутки, кнопки масштабирования и т. Д.) На версию темного режима, но не изменит загруженный контент.

Чтобы изменить содержимое, вам необходимо использовать метод setForceDark в настройках веб-просмотра, чтобы он также изменил свое содержимое. Версию для совместимости этого метода можно найти в пакете AndroidX webkit.

Добавьте в свою сборку gradle следующую зависимость:

implementation 'androidx.webkit:webkit:1.3.0'

(1.3.0 - это минимально необходимая версия этого пакета. Но более высокие версии также должны работать.)

И добавьте следующие строки кода в инициализацию вашего веб-просмотра:

if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(myWebView.getSettings(), WebSettingsCompat.FORCE_DARK_ON);
}

Проверка isFeatureSupported предназначена для того, чтобы убедиться, что Android System WebView версия, которую пользователь установил на свое устройство, поддерживает темный режим (поскольку он может быть обновлен или понижен независимо от версии Android через Google Play).

Примечание. Для использования функции setForceDark на работающем устройстве необходимо установить Android System WebView v76 или более поздней версии.

Функция принудительного затемнения контента веб-просмотра имеет две так называемые стратегии:

• Затемнение пользовательского агента: веб-просмотр переведет свое содержимое в темный режим, автоматически инвертируя или затемняя цвета его содержимого.

• Затемнение на основе темы: веб-просмотр перейдет в темный режим в соответствии с темой контента (включая запрос @media (prefers-color-scheme: dark)).

Чтобы установить, какую стратегию веб-просмотр должен использовать для применения силы темноты, вы можете использовать следующий код:

if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(myWebView.getSettings(), WebSettingsCompat.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY);
}

Примечание. Для выбора стратегии на работающем устройстве должна быть установлена ​​система Android System WebView v83 или более поздняя. Версии WebView, которые поддерживают setForceDark, но не поддерживают выбор стратегии (с v76 по v81), будут использовать затемнение пользовательского агента.

Поддерживаемые варианты стратегии:

• DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: используйте только затемнение пользовательского агента и игнорируйте любые темы в контенте (по умолчанию)
• DARK_STRATEGY_WEB_THEME_DARKENING_ONLY: используйте только темную тему самого содержания, чтобы перевести страницу в темный режим. Если контент не имеет темной темы, веб-просмотр не будет применять затемнение и покажет его как есть.
• DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING: используйте темную тему самого содержания, чтобы перевести страницу в темный режим. Если контент не имеет темной темы, используйте затемнение пользовательского агента.

Как работает проверка Javascript для затемненных веб-страниц?

Вызов JavaScript window.matchMedia('(prefers-color-scheme: dark)') будет соответствовать как стратегии затемнения пользовательского агента, так и стратегии затемнения веб-темы.

У меня для веб-просмотра установлено значение FORCE_DARK_AUTO, и мое приложение работает в дневной ночной теме, но каким-то образом мое веб-представление не применяет темный режим автоматически в зависимости от темы моего приложения. Почему это происходит?

Это потому, что значение параметра FORCE_DARK_AUTO веб-просмотра не работает на основе тем (как указано в документация). Он проверяет наличие функции Android 10 Force Dark. (функция быстрого исправления темного режима для приложений. Она называется так же, но не имеет прямого отношения к WebView force dark).

Если вы не используете принудительное затемнение, а тему приложения для обработки темного режима (как рекомендуется), вам необходимо реализовать собственную проверку того, когда применять функцию принудительного затемнения веб-просмотра. Пример использования темы DayNight:

int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
   //Code to enable force dark using FORCE_DARK_ON and select force dark strategy 
}

Что я делаю, основываясь на вашем коде вопроса, так это принудительно в зависимости от текущего статуса:

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 в другом)

Здесь есть два важных документа:

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>

Другой вариант - справиться с этим вручную, установив FORCE_DARK_ON / OFF на основе соответствующего изменения конфигурации.

Currentlly WebView не поддерживает схему prefers-color-scheme отчасти потому, что принудительное затемнение было реализовано до стандартизации предпочтительной цветовой схемы, а отчасти потому, что нет возможности разумно интегрировать это (без стилей) с принудительным затемнением. Цель состоит в том, чтобы предоставить возможность выбрать либо принудительно темную, либо предпочитаемую цветовую схему через androidx.webkit.

Я не думаю, что WebView пока поддерживает медиа-запрос CSS prefers-color-scheme.

Новый API для setForceDark имеет три состояния: включено, выключено или автоматически.

ВКЛ - ваш контент всегда будет темнее с каждым разом.

ВЫКЛ. - ваш контент всегда будет отображаться светлым.

АВТО - контент будет темнее, если тема вашего приложения темнее ИЛИ ОС устройства находится в темном режиме, потому что пользователь переключает переключатель уровня ОС или включен режим экономии заряда батареи.

Я считаю, что поддержка более старых версий Android, а также контроль над тем, использовать ли prefers-color-scheme вместо Force Dark WebView, скоро появится через AndroidX. Срок платежа в настоящее время неизвестен.

На данный момент я бы рекомендовал установить для WebView значение ForceDark Auto. Это будет работать на Android Q и выше.

Я хотел бы следить за примечаниями к выпуску AndroidX для остальной поддержки, которая вам требуется для устройств на Android P и ниже.