Web Görünümü'nde web içeriğini koyulaştır

Android 10 ve sonraki sürümlerde uygulamalar koyu tema desteği sunabilir ve sistem temasına göre açık ile koyu uygulama temaları arasında otomatik olarak geçiş yapabilir. Mevcut uygulama temasıyla eşleşecek şekilde, WebView'deki web içeriği açık, koyu veya varsayılan stili de kullanabilir.

WebView'in davranışı, prefers-color-scheme ve color-scheme web standartlarıyla birlikte çalışır. Mümkünse uygulamanızın WebView'de göstermesini istediğiniz web içeriğini yazarken web siteniz için koyu tema tanımlamalı ve WebView'ün web içeriğinin temasını uygulamanızın temasıyla eşleştirebilmesi için prefers-color-scheme'yi uygulamalısınız.

Aşağıdaki tabloda, web içeriğinin stiline ve uygulamanızın koşullarına bağlı olarak WebView'un uygulamanızdaki web içeriğini nasıl oluşturduğu açıklanmaktadır:

Uygulama koşulları prefers-color-scheme kullanan web içeriği prefers-color-scheme kullanmayan web içeriği
Uygulama, isLightTheme parametresi true olarak ayarlanmış veya ayarlanmamışken açık tema kullanıyor. WebView, içeriği içerik yazarının tanımladığı açık temayla gösterir. WebView, içeriği içerik yazarı tarafından tanımlanan varsayılan stil ile oluşturur.
Uygulama, algoritma aracılığıyla koyu tema uygulamak için Koyu Temayı Zorla seçeneğini kullanıyor. WebView, içeriği içerik yazarının tanımladığı koyu temayla gösterir. İçerik yazarı izin verirse WebView, içeriği bir algoritma kullanılarak oluşturulan koyu temayla gösterir.
Uygulama, isLightTheme false olarak ayarlanmış koyu bir tema kullanıyor ve Web Görünümü için algoritmik olarak karartmaya izin vermiyor. WebView, içeriği içerik yazarının tanımladığı koyu temayla oluşturur. WebView, içeriği içerik yazarı tarafından tanımlanan varsayılan stil ile oluşturur.
Uygulama, isLightTheme false olarak ayarlanmış koyu tema kullanıyor ve WebView için algoritmik karartmaya izin veriyor. WebView, içeriği içerik yazarının tanımladığı koyu temayla gösterir. İçerik yazarı izin verirse WebView, içeriği bir algoritma kullanılarak oluşturulan koyu temayla oluşturur.

İçerik yazarının stili

Bir uygulamanın isLightTheme özelliği, uygulamanın temasının açık mı yoksa koyu mu olduğunu belirtir. WebView, prefers-color-scheme değerini her zaman isLightTheme'a göre ayarlar. isLightTheme true ise veya belirtilmediyse prefers-color-scheme light olur. Aksi takdirde dark olur.

Bu, web içeriğinde prefers-color-scheme kullanılıyorsa ve içerik yazarı buna izin veriyorsa içerik yazarının tanımladığı açık veya koyu temanın, uygulamanın temasıyla eşleşecek şekilde web içeriğine her zaman otomatik olarak uygulanacağı anlamına gelir.

Algoritmik karartma

Web içeriğinin prefers-color-scheme kullanmadığı durumları kapsayacak şekilde, uygulamanız gerektiğinde WebView'ün oluşturacağı web içeriğine algoritmik olarak koyu tema uygulamasını sağlayabilir.

Uygulamanız, koyu temayı algoritmik olarak uygulamak için uygulama düzeyinde Dark Force kullanıyorsa Dark Force ile web içeriği için algoritmik karartmaya izin verme konusunu açıklayan aşağıdaki bölüme bakın.

Uygulamanız Koyu'yu Zorunlu Kılma özelliğini kullanmıyorsa uygulamanızın, WebView'de algoritmik karartmaya ne zaman izin verileceğini belirtme şekli uygulamanızın hedef API düzeyine bağlıdır. Ayrıntılar için Android 13 veya sonraki sürümleri hedefleyen uygulamalar ve Android 12 veya önceki sürümleri hedefleyen uygulamalar ile ilgili aşağıdaki bölümlere bakın.

Zorunlu koyu mod ile web içeriği için algoritmik karartmaya izin verme

Uygulamanız uygulama düzeyinde Karanlık Mod'u Zorunlu Tut özelliğini kullanıyorsa aşağıdaki koşullar karşılanırsa WebView, web içeriğine algoritmik karartma uygular:

  • WebView ve üst öğeleri, Koyu'yu Zorla'ya izin verir.
  • Geçerli etkinlik teması açık olarak işaretlenmiştir ve isLightTheme true olarak ayarlanmıştır.
  • Web içeriği yazarı, karartmayı açıkça devre dışı bırakmaz.
  • Android 13'ü (API düzeyi 33) veya sonraki sürümleri hedefleyen uygulamalarda web içeriği prefers-color-scheme kullanmaz.
  • Android 12 (API düzeyi 32) veya önceki sürümleri hedefleyen uygulamalar için: Uygulama, Web Görünümü'nün forceDarkMode ayarını FORCE_DARK_AUTO ve Zorunlu Koyu stratejisini DARK_STRATEGY_USER_AGENT_DARKENING_ONLY olarak ayarlamıştır.

WebView ve tüm üst öğeleri, View.setForceDarkAllowed() kullanarak karanlık modu zorunlu kılabilir. Varsayılan değer, Android temasının setForceDarkAllowed() özelliğinden alınır. Bu özellik de true olarak ayarlanmalıdır.

Zorunlu Koyu Mod, öncelikle kendi koyu temalarını sağlamayan uygulamalarda geriye dönük uyumluluk için sağlanır. Uygulamanız Koyu'yu Zorla özelliğini kullanıyorsa koyu tema desteği eklemenizi öneririz.

Algoritmik karartmaya izin verme (Android 13 veya sonraki sürümleri hedefleyen uygulamalar)

Uygulama düzeyinde Zorunlu Karanlık modu kullanmayan ve Android 13 (API düzeyi 33) veya sonraki sürümleri hedefleyen uygulamalarda AndroidX setAlgorithmicDarkeningAllowed() yöntemini kullanın ve WebView'in algoritmik karartmaya izin vermesi gerektiğini belirtmek için true parametresini iletin. Bu yöntem, önceki Android sürümleriyle geriye dönük uyumludur.

Ardından WebView, aşağıdaki koşullar karşılanırsa algoritmik karartma uygular:

  • Web içeriğinde prefers-color-scheme kullanılmıyor.
  • Web içeriği yazarı, karartmayı açıkça devre dışı bırakmaz.

Algoritmik karartmaya izin verme (Android 12 veya daha eski sürümleri hedefleyen uygulamalar)

Uygulama düzeyinde karanlık modu zorlama özelliğini kullanmayan ve Android 12'yi (API düzeyi 32) veya daha eski sürümleri hedefleyen uygulamalarda algoritmik karartma özelliğini etkinleştirmek için FORCE_DARK_ON değerini kullanın.

Uygulamanız açık ve koyu temalar arasında geçiş yapmak için kendi yöntemini (ör. kullanıcı arayüzünde açma/kapatma düğmesi veya zamana dayalı otomatik seçim) sağlıyorsa FORCE_DARK_ON ile birlikte FORCE_DARK_OFF kullanın.

Özelliğin desteklenip desteklenmediğini kontrol etmek için WebView nesnenizi yapılandırdığınız her yere (ör. Activity.onCreate) aşağıdaki kod satırlarını ekleyin:

Kotlin

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

Java

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

Uygulamanız, sistem tercihlerindeki değişiklikleri algılamaya dayanıyorsa tema değişikliklerini açıkça dinlemeli ve bunları FORCE_DARK_ON ve FORCE_DARK_OFF durumlarıyla WebView'e uygulamalıdır.

Aşağıdaki kod snippet'inde tema biçiminin nasıl değiştirileceği gösterilmektedir:

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

Koyu tema işlemeyi özelleştirin

Belirli bir WebView'e karartma işleminin nasıl uygulanacağını kontrol etmek için AndroidX'teki ForceDarkStrategy API'yi de kullanabilirsiniz. Bu API yalnızca zorunlu koyu mod FORCE_DARK_ON veya FORCE_DARK_AUTO olarak ayarlanmışsa geçerlidir.

Uygulamanız, API'yi kullanarak web temasını karartma veya kullanıcı aracısını karartma özelliğini kullanabilir:

  • Web temasını karartma: Web geliştiricileri, koyu modda web sayfası görünümünü kontrol etmek için @media (prefers-color-scheme: dark) uygulayabilir. WebView, içeriği bu ayarlara göre oluşturur. Web temasının karartılması hakkında daha fazla bilgi için özelliğe bakın.
  • Kullanıcı aracısı karartma: WebView, web sayfasının renklerini otomatik olarak tersine çevirir. Kullanıcı aracısı karartma özelliğini kullanıyorsanız @media (prefers-color-scheme: dark) sorgusu false olarak değerlendirilir.

İki strateji arasında seçim yapmak için aşağıdaki API'yi kullanın:

Kotlin

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

Java

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

Desteklenen strateji seçenekleri şunlardır:

  • DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING: Bu, varsayılan seçenektir. Çoğu tarayıcı <meta name="color-scheme" content="dark light"> etiketini isteğe bağlı olarak değerlendirirken Android WebView'in varsayılan modu, meta etiketin web sayfasının <meta name="color-scheme" content="dark light"> medya sorgularını dikkate almasını gerektirir.prefers-color-scheme Web Görünümlerini DARK_STRATEGY_WEB_THEME_DARKENING_ONLY moduyla kullanabilirsiniz. Bu durumda, etiket atlanmış olsa bile Web Görünümü her zaman medya sorgularını uygular.

    Ancak web geliştiricilerin, içeriğin varsayılan yapılandırmayla WebView'lerde doğru şekilde oluşturulmasını sağlamak için web sitelerine <meta name="color-scheme" content="dark light"> etiketi eklemelerini öneririz.

  • DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: "Kullanıcı aracısı karartma" olarak adlandırılan Web Görünümü, web sayfası karartma işlemlerini yoksayar ve otomatik karartma uygular.

Uygulamanız, prefers-color-scheme medya sorgusuyla özelleştirdiğiniz birinci taraf web içeriği gösteriyorsa WebView'in özel temayı kullandığından emin olmanızı öneririz.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY

Koyu temanın uygulandığı bir örnek için GitHub'daki WebView demosuna bakın