web-dev-qa-db-fra.com

Laisser WebView activé Android fonctionne avec le schéma de couleurs préféré: sombre

J'ai une Android App qui utilise la vue Web, et récemment j'essaie de comprendre comment ajouter un thème sombre en utilisant la nouvelle syntaxe CSS @media (prefers-color-scheme: dark) CSS. J'ai la CSS correct écrit sur ma page, et si je l'ouvre en Chrome avec le mode sombre Chrome allumé, cela fonctionne. J'ai aussi mon AppTheme héritant de Theme.AppCompat.DayNight, et mon application affiche une boîte de dialogue de chargement sombre, etc. lorsque j'active le mode sombre pour l'ensemble du système d'exploitation sur mon appareil. Même les options de saisie semi-automatique pour les éléments <input> devenir sombre. Mais malgré tout, la page Web chargée avec ma vue Web ne s'assombrit pas. Selon cette page , les vues Web devraient prendre en charge cette fonctionnalité, mais je ne peux tout simplement pas la faire fonctionner. manquant ici?

Je viens aussi de découvrir que dans l'API 29, il y a cette méthode WebSettings.setForceDark(); Serait-ce la chose que je recherche? J'espère cependant trouver une solution qui fonctionne avec un niveau d'API inférieur.

Soit dit en passant, ma solution de contournement actuelle consiste à injecter une interface JavaScript comme celle-ci:

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;
    }
}

Et puis dans ma page Web, appelez la méthode jsInterface.isNightMode() et chargez dynamiquement différents fichiers CSS en fonction du résultat. Cela fonctionne certainement et répond au réglage global du mode sombre comme vous le souhaitez, mais je me demande toujours si je peux faire fonctionner prefers-color-scheme.

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

Ce que je fais, en fonction de votre code de question, c'est de forcer en fonction de l'état actuel:

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

De cette façon, @media (prefers-color-scheme: dark) fonctionne, mais @media (prefers-color-scheme: light) ne fonctionne toujours pas (essayé d'utiliser FORCE_DARK_OFF Et FORCE_DARK_AUTO Dans un autre)

3
jcesarmobile

Il existe deux documents pertinents ici:

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

https://developer.Android.com/reference/Android/view/View.html#setForceDarkAllowed (boolean)

Les points clés sont

  1. Le WebView doit autoriser la force d'obscurité, et tous ses parents doivent aussi.
  2. Le thème doit être marqué comme clair.

Cela signifie que faire fonctionner le comportement FORCE_DARK_AUTO dans WebView est un peu complexe. L'ajout de ce qui suit à un thème AppCompat.DayNight fonctionne, mais n'est peut-être pas la meilleure solution car il peut s'appliquer Android forcer l'obscurité aux vues autres que WebView.

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

L'autre option consiste à gérer cela manuellement, en définissant FORCE_DARK_ON/OFF en fonction du changement de configuration correspondant.

Currentlly WebView ne prend pas en charge le schéma de couleurs préféré en partie parce que la force sombre a été implémentée avant la standardisation du schéma de couleurs préféré, et en partie parce qu'il n'y a aucun moyen d'intégrer cela de manière sensible (sans flash de style) avec la force sombre. L'intention est de fournir la possibilité de choisir entre forcer l'obscurité ou le jeu de couleurs préféré via androidx.webkit.

2
Tobias Sargeant

Je ne pense pas que WebView honore encore la requête de média CSS à schéma de couleurs préféré.

La nouvelle API pour setForceDark a trois états: on, off ou auto.

ON - votre contenu sera toujours plus sombre à chaque fois.

OFF - votre contenu sera toujours rendu clair à chaque fois.

AUTO - le contenu sera rendu plus sombre si le thème de votre application est plus sombre OR le système d'exploitation de l'appareil est en mode sombre parce que l'utilisateur bascule le commutateur de niveau du système d'exploitation ou le mode économiseur de batterie activé.

Je pense que la prise en charge des anciennes versions de Android et le contrôle de l'opportunité d'utiliser le modèle de couleurs préféré au lieu de la force sombre de WebView arriveront bientôt via AndroidX. La date d'échéance est inconnue pour le moment.

Pour l'instant, je recommanderais de configurer WebView sur setForceDark Auto. Cela fonctionnera sur Android Q et supérieur).

Je garderais un œil sur les notes de version d'AndroidX pour le reste du support dont vous avez besoin pour les appareils sur Android P et ci-dessous.

1
cmd