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

Android 10 ve sonraki sürümlerde uygulamalar Koyu temayı destekleyip sistem temasına göre açık ve koyu uygulama temaları arasında otomatik olarak geçiş yapabilir. Geçerli uygulama temasıyla eşleşme sağlamak için Web Görünümü'ndeki web içeriğinde açık, koyu veya varsayılan stil de kullanılabilir.

Web Görünümü'nün davranışı, prefers-color-scheme ve color-scheme web standartlarıyla birlikte çalışır. Mümkün olduğunda, uygulamanızın Web Görünümü'nde görüntülenmesini istediğiniz web içeriğini yazarsanız web siteniz için koyu bir tema tanımlamanız ve Web Görünümü'nün, web içeriğinin temasını uygulamanızın temasıyla eşleştirebilmesi için prefers-color-scheme uygulamanız gerekir.

Aşağıdaki tabloda, web içeriğinin stiline ve uygulamanızın koşullarına bağlı olarak Web Görünümü'nün 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 değeri true olarak ayarlanmış veya ayarlanmamış açık tema kullanıyor. Web Görünümü, içeriği içerik yazarının tanımladığı açık temayla oluşturur. Web Görünümü, içeriği içerik yazarı tarafından tanımlanan varsayılan stille oluşturur.
Uygulama, algoritmik olarak koyu bir tema uygulamak için Koyu olmaya zorla'yı kullanıyor. Web Görünümü, içeriği içerik yazarının tanımladığı koyu temayla oluşturur. İçerik yazarı izin verirse WebView, içeriği bir algoritma kullanılarak oluşturulan koyu bir temayla oluşturur.
Uygulama, isLightTheme değeri false olarak ayarlanmış koyu bir tema kullanıyor ve Web Görünümü için algoritmik koyulaştırmaya izin vermiyor. Web Görünümü, içeriği içerik yazarının tanımladığı koyu temayla oluşturur. Web Görünümü, içeriği içerik yazarı tarafından tanımlanan varsayılan stille oluşturur.
Uygulama, isLightTheme ayarı false olarak belirlenmiş koyu tema kullanıyor ve Web Görünümü için algoritmayla karartmaya izin veriyor. Web Görünümü, içeriği içerik yazarının tanımladığı koyu temayla oluşturur. İçerik yazarı izin verirse WebView, içeriği bir algoritma kullanılarak oluşturulan koyu bir temayla oluşturur.

İçerik yazarı stili

Bir uygulamanın isLightTheme özelliği, uygulamanın temasının açık mı yoksa koyu mu olduğunu belirtir. Web Görünümü, prefers-color-scheme değerini her zaman isLightTheme öğesine göre ayarlar. isLightTheme değeri true ise veya belirtilmemişse prefers-color-scheme light, aksi takdirde dark olur.

Yani, web içeriği prefers-color-scheme kullanıyorsa ve içerik yazarı izin veriyorsa içerik yazarı tarafından tanımlanan açık veya koyu tema her zaman web içeriğine, uygulamanın temasıyla eşleşecek şekilde otomatik olarak uygulanır.

Algoritmayla karartma

Uygulamanız, web içeriğinin prefers-color-scheme kullanmadığı durumları kapsamak amacıyla, gerektiğinde Web Görünümü'nün oluşturduğu web içeriğine algoritmik olarak koyu renk tema uygulamasına izin verebilir.

Uygulamanız, uygulamanıza algoritmik olarak koyu bir tema uygulamak için uygulama düzeyinde Koyu olmaya zorla'yı kullanıyorsa Web içeriği için algoritmik karartmaya izin vermeyi, Koyuya Zorla'ya nasıl izin vereceğinizi açıklayan aşağıdaki bölüme bakın.

Uygulamanızda Force Dark kullanılmıyorsa uygulamanızın Web Görünümü'nde algoritmayla karartmaya ne zaman izin verileceğini nasıl belirttiği, 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 sonraki sürümleri hedefleyen uygulamalar ile ilgili aşağıdaki bölümlere bakın.

Dark ile web içeriği için algoritmik karartmaya izin ver

Uygulamanız uygulama düzeyinde Koyu olmaya zorla kullanıyorsa Web Görünümü, aşağıdaki koşulların karşılanması durumunda web içeriğine algoritmayla karartma uygular:

  • WebView ve üst öğeleri, Koyu Renkleri Güçlendir'e izin verir.
  • Mevcut etkinlik teması açık renk olarak işaretlenir ve isLightTheme true olarak ayarlanır.
  • Web içeriği yazarı, koyulaştırmayı açık bir şekilde devre dışı bırakmaz.
  • Web içeriği, Android 13 (API düzeyi 33) veya sonraki sürümleri hedefleyen uygulamalar için 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 Karanlığı Zorunlu Kıl stratejisini DARK_STRATEGY_USER_AGENT_DARKENING_ONLY olarak ayarlamıştır.

Web Görünümü ve tüm üst öğeleri, View.setForceDarkAllowed() kullanarak zorunlu karanlıka izin verebilir. Varsayılan değer, Android temasının setForceDarkAllowed() özelliğinden alınır ve bu özelliğin true olarak ayarlanması gerekir.

Koyu Mod, kendi koyu temasını sağlamayan uygulamalarda geriye dönük uyumluluk sağlamak amacıyla kullanıma sunulmuştur. Uygulamanızda Force Dark kullanılıyorsa koyu tema desteği eklemenizi öneririz.

Algoritmaya dayalı karartmaya izin ver (Android 13 veya sonraki sürümleri hedefleyen uygulamalar)

Uygulama düzeyinde Force Koyu kullanmayan ve Android 13 (API düzeyi 33) veya sonraki sürümleri hedefleyen uygulamalar için AndroidX setAlgorithmicDarkeningAllowed() yöntemini kullanın ve Web Görünümü'nün algoritmayla karartmaya izin vermesi gerektiğini belirtmek için true değerini geçirin. Bu yöntem önceki Android sürümleriyle geriye dönük uyumluluğa sahiptir.

Ardından Web Görünümü, aşağıdaki koşullar karşılanırsa algoritmaya dayalı koyulaştırma uygular:

  • Web içeriği prefers-color-scheme kullanmıyor.
  • Web içeriği yazarı, koyulaştırmayı açık bir şekilde devre dışı bırakmaz.

Algoritmaya dayalı karartmaya izin ver (Android 12 veya önceki sürümleri hedefleyen uygulamalar)

Uygulama düzeyinde Force Koyu kullanmayan ve Android 12 (API düzeyi 32) veya önceki sürümleri hedefleyen uygulamalarda algoritmik koyulaştırmaya izin vermek için FORCE_DARK_ON kullanın.

Uygulamanız, açık ve koyu temalar arasında geçiş yapmak için kendi yöntemini (kullanıcı arayüzünde açılıp kapanabilen bir öğe veya zamana dayalı otomatik seçim gibi) sunuyorsa FORCE_DARK_ON uygulamasını FORCE_DARK_OFF ile birlikte kullanın.

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

Kotlin

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

Java

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

Uygulamanız, sistem tercihlerinde yapılan değişiklikleri algılıyorsa tema değişikliklerini açıkça dinlemeli ve bunları FORCE_DARK_ON ve FORCE_DARK_OFF durumlarıyla Web Görünümü'ne 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

Ayrıca, koyulaştırmanın belirli bir Web Görünümü'ne nasıl uygulandığını kontrol etmek için AndroidX'te ForceDarkStrategy API'yi de kullanabilirsiniz. Bu API, yalnızca güç koyu ayarı FORCE_DARK_ON veya FORCE_DARK_AUTO olarak ayarlanmışsa geçerlidir.

Uygulamanız, API'yi kullanarak web temasını koyulaştırma veya kullanıcı aracısı koyulaştırmayı kullanabilir:

  • Web temasını karartma: Web geliştiricileri, web sayfası görünümünü koyu modda kontrol etmek için @media (prefers-color-scheme: dark) uygulamasını kullanabilir. Web Görünümü, içeriği bu ayarlara göre oluşturur. Web temasını koyulaştırma hakkında daha fazla bilgi için spesifikasyona bakın.
  • Kullanıcı aracısı karartma: Web Görünümü, web sayfasının renklerini otomatik olarak çevirir. Kullanıcı aracısı koyulaştırmayı kullanırsanız @media (prefers-color-scheme: dark) sorgusu false olarak değerlendirilir.

İki stratejiden birini seçmek 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 işlerken Android Web Görünümü'nün varsayılan modu, web sayfasının prefers-color-scheme medya sorgularını dikkate almak için meta etiketin kullanılmasını gerektirir. Web Görünümlerini DARK_STRATEGY_WEB_THEME_DARKENING_ONLY moduyla kullanabilirsiniz. Bu durumda, etiket atlanmış olsa bile WebView her zaman medya sorguları uygular.

    Ancak web geliştiricilerin, içeriğin varsayılan yapılandırmayla Web Görünümlerinde doğru şekilde oluşturulduğundan emin olmak 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" adı verilen Web Görünümü, web sayfası karartmalarını yok sayar ve otomatik koyulaştırma uygular.

Uygulamanız, prefers-color-scheme medya sorgusuyla özelleştirdiğiniz birinci taraf web içeriği gösteriyorsa Web Görünümü'nün özel temayı kullandığından emin olmak için DARK_STRATEGY_WEB_THEME_DARKENING_ONLY öneririz.

Uygulanan koyu temanın bir örneği için GitHub'daki Web Görünümü demosunu inceleyin