Este grupo de trabajo ha estado mucho tiempo investigando la respuesta a tus dudas, te dejamos la soluciones de modo que nuestro objetivo es serte de gran apoyo.
Solución:
Android Webview maneja el modo día / noche de manera un poco diferente al resto de las vistas. Configurar su tema en oscuro cambiará los componentes de WebView (barra de desplazamiento, botones de zoom, etc.) a una versión en modo oscuro, pero no cambiará el contenido que cargó.
Para cambiar el contenido, debe usar el método setForceDark de la configuración de la vista web para que también cambie su contenido. Se puede encontrar una versión de compatibilidad de este método en el paquete webkit de AndroidX.
Agregue la siguiente dependencia a su compilación de gradle:
implementation 'androidx.webkit:webkit:1.3.0'
(1.3.0 es la versión mínima requerida de este paquete. Pero las versiones superiores también deberían funcionar).
Y agregue las siguientes líneas de código a la inicialización de su vista web:
if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK))
WebSettingsCompat.setForceDark(myWebView.getSettings(), WebSettingsCompat.FORCE_DARK_ON);
los isFeatureSupported verifique si está allí para asegurarse de que la versión de WebView del sistema Android que el usuario ha instalado en su dispositivo sea compatible con el modo oscuro (ya que esto se puede actualizar o degradar independientemente de la versión de Android a través de Google Play).
Nota: los setForceDark la función requiere WebView del sistema Android v76 o hasta que se instale en el dispositivo en ejecución.
La función de fuerza oscura para el contenido de vista web tiene dos estrategias:
-
Oscurecimiento del agente de usuario: La vista web establecerá su contenido en modo oscuro invirtiendo u oscureciendo automáticamente los colores de su contenido.
-
Oscurecimiento basado en temas: La vista web cambiará al modo oscuro según el tema del contenido (que incluye el
@media (prefers-color-scheme: dark)consulta).
Para establecer qué estrategia debe usar la vista web para aplicar la fuerza oscura, puede usar el siguiente código:
if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY))
WebSettingsCompat.setForceDarkStrategy(myWebView.getSettings(), WebSettingsCompat.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY);
Nota: La selección de estrategia requiere WebView del sistema Android v83 o hasta que se instale en el dispositivo en ejecución. Versiones de WebView que admiten setForceDark pero no admite selecciones de estrategia (v76 a v81) utilizará el oscurecimiento del agente de usuario
Las opciones de estrategia admitidas son:
- DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: Utilice solo el oscurecimiento del agente de usuario e ignore cualquier tema en el contenido (predeterminado)
- DARK_STRATEGY_WEB_THEME_DARKENING_ONLY: Utilice solo el tema oscuro del contenido para configurar la página en modo oscuro. Si el contenido no tiene un tema oscuro, la vista web no aplicará ningún oscurecimiento y lo mostrará “tal cual”.
- DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING: Use el tema oscuro del contenido para configurar la página en modo oscuro. Si el contenido no tiene un tema oscuro, use el oscurecimiento del agente de usuario.
¿Cómo funcionan las comprobaciones de Javascript para las vistas web oscurecidas?
La llamada de JavaScript window.matchMedia('(prefers-color-scheme: dark)') coincidirá tanto en el oscurecimiento del agente de usuario como en la estrategia de oscurecimiento del tema web.
Tengo mi vista web configurada en FORCE_DARK_AUTO y mi aplicación se está ejecutando en un tema de día y noche, pero de alguna manera mi vista web no aplica el modo oscuro automáticamente según el tema de mi aplicación. ¿Por qué pasó esto?
Es porque el FORCE_DARK_AUTO el valor de configuración de la vista web no funciona según los temas (como se indica en la documentación). Comprueba la función Force Dark de Android 10 (una función de modo oscuro de “solución rápida” para aplicaciones. Tiene un nombre similar, pero no está directamente relacionada con WebView force dark).
Si no está usando Force Dark sino un tema de aplicación para manejar el modo oscuro (como se recomienda), debe implementar su propia verificación de cuándo aplicar la función Force Dark de la vista web. Un ejemplo al utilizar un tema de 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
Lo que hago, en función de su código de pregunta, es forzar según el estado actual:
int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES)
webSettings.setForceDark(WebSettings.FORCE_DARK_ON);
De esta manera @media (prefers-color-scheme: dark) funciona, pero @media (prefers-color-scheme: light) todavía no funciona (intenté usar FORCE_DARK_OFF y FORCE_DARK_AUTO en otro)
Aquí hay dos documentos relevantes:
https://developer.android.com/guide/topics/ui/look-and-feel/darktheme#force_dark
https://developer.android.com/reference/android/view/View.html#setForceDarkAllowed(boolean)
los key los puntos son
- WebView debe permitir la fuerza de oscuridad, y todos sus padres también deben hacerlo.
- El tema debe estar marcado como ligero.
Esto significa que conseguir que el comportamiento de FORCE_DARK_AUTO funcione en WebView es un poco complejo. Agregar lo siguiente a un tema AppCompat.DayNight funciona, pero tal vez no sea la mejor solución, ya que puede aplicar la fuerza oscura de Android a vistas distintas de WebView.
- true
- true
La otra opción es manejar esto manualmente, configurando FORCE_DARK_ON / OFF según el cambio de configuración relevante.
Actualmente, WebView no admite el esquema de preferencias de color en parte porque la fuerza oscura se implementó antes de la estandarización del esquema de preferencias de color, y en parte porque no hay forma de integrar eso de manera sensata (sin flashes de estilo) con la fuerza de oscuridad. La intención es proporcionar la capacidad de elegir forzar oscuridad o preferir el esquema de color a través de androidx.webkit.
Reseñas y calificaciones del artículo
Si tienes alguna sospecha y disposición de perfeccionar nuestro tutorial puedes escribir una reseña y con mucho gusto lo ojearemos.