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

Android 10 ve sonraki sürümlerde uygulamalar Koyu tema ve otomatik olarak değiştir uygulama temalarının ne kadar iyi olduğundan emin olun. geçerli uygulama teması, WebView'daki web içeriği açık, koyu veya varsayılan stilleri de kullanabilirsiniz.

WebView'un davranışı prefers-color-scheme ve color-scheme web standartları. Mümkün olduğunda, istediğiniz web içeriğini siz yazarsanız WebView'da görüntülenecek şekilde ayarlamak için uygulamanız için web sitesi ve WebView'un, web içeriğiyle uyumlu olması için prefers-color-scheme temaya göre ekleyebilirsiniz.

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

İçerik yazarı stili

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

Bu, web içeriği prefers-color-scheme ve içeriği kullanıyorsa yazar tarafından tanımlanan açık veya koyu tema her zaman uygulamanın temasıyla uyumlu olması için web içeriğine otomatik olarak uygulanır.

Algoritmik koyulaştırma

Web içeriğinin prefers-color-scheme uygulamanız, gerektiğinde WebView'un algoritmik olarak karanlık bir temaya sahip olur.

Uygulamanızda uygulama düzeyi kullanılıyorsa Algoritmik olarak koyu modu zorunlu kılın uygulamanıza koyu bir tema eklemek için aşağıdaki adımları uygulayın: Web içeriğinde algoritmik koyulaştırmaya izin ver.

Uygulamanız, Force Dark özelliğini kullanmıyorsa uygulamanın ne zaman izin verileceğini nasıl belirler? WebView'daki algoritmik olarak karartma, uygulamanızın hedef API düzeyi. Android 13 veya sonraki sürümleri hedefleyen uygulamalar ve Android 12 veya önceki sürümleri hedefleyen uygulamalar hakkında ayrıntılı bilgi edinin.

Zorunlu Koyu renk ayarıyla web içeriğinde algoritmik karartmaya izin ver

Uygulamanızda uygulama düzeyi kullanılıyorsa Koyu Zorunlu, WebView geçerli olur aşağıdaki koşullar gerçekleştiğinde web içeriğine algoritmik olarak karartma:

• WebView ve üst öğeleri, Force Dark'a izin verir.
• Geçerli etkinlik teması, açık renk olarak işaretlenir. isLightTheme şu şekilde ayarlandı: true.
• Web içeriğinin yazarı, karartmayı açık bir şekilde devre dışı bırakmaz.
• Android 13 (API düzeyi 33) veya sonraki sürümleri hedefleyen uygulamalar için web içeriği prefers-color-scheme kullanmıyor.
• Android 12 (API düzeyi 32) veya önceki sürümü hedefleyen uygulamalar için: Uygulama Web Görünümü'nün forceDarkMode ayarı - FORCE_DARK_AUTO ve Force Dark stratejisini DARK_STRATEGY_USER_AGENT_DARKENING_ONLY.

WebView ve tüm üst öğeleri, View.setForceDarkAllowed(). Varsayılan değersetForceDarkAllowed() Android teması. Bu tema da true olarak ayarlanmalıdır.

Koyu mod, Kendi koyu temalarını sunma. Uygulamanız Zorunlu Koyu özelliğini kullanıyorsa koyu tema için destek ekleyebilirsiniz.

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

Uygulama düzeyinde Zorunlu Koyu özelliğini kullanmayan ve Android 13'ü (API düzeyi) hedefleyen uygulamalar için 33) veya daha yeni sürümler, AndroidX kullanın setAlgorithmicDarkeningAllowed() yöntemini ve bir WebView'un algoritmiklere izin vermesi gerektiğini belirtmek için true koyulaşıyor. Bu yöntem önceki Android ile geriye dönük uyumluluğa sahiptir sürümleri vardır.

Daha sonra WebView, aşağıdaki koşullar karşılanırsa algoritmik koyulaştırma uygular:

• Web içeriği prefers-color-scheme kullanmaz.
• Web içeriğinin yazarı, karartmayı açık bir şekilde devre dışı bırakmaz.

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

Uygulama düzeyinde Zorunlu Koyu özelliğini kullanmayan ve Android 12'yi (API düzeyi) hedefleyen uygulamalar için 32) veya daha düşük FORCE_DARK_ON kullanarak algoritmik olarak karartmayı unutmayın.

FORCE_DARK_ON uygulamasını şununla birlikte kullanın: FORCE_DARK_OFF Uygulamanız açık ve koyu temalar arasında geçiş için kendi yöntemini sunuyorsa, Örneğin kullanıcı arayüzünde geçiş yapılabilir bir öğe veya zamana dayalı otomatik seçim gibi.

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

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

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

Uygulamanız sistem tercihlerindeki değişiklikleri algılamayı kullanıyorsa tema değişikliklerini açıkça dinleme ve bunları WebView'a FORCE_DARK_ON ve FORCE_DARK_OFF eyaletler.

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

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 -> {
            //
        }
    }
}

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 şunu da kullanabilirsiniz: ForceDarkStrateji API'si özelliğini kullanabilirsiniz. Bu API yalnızca zorunlu koyuluk, FORCE_DARK_ON veya FORCE_DARK_AUTO değerine ayarlanmışsa geçerlidir.

API ile uygulamanız, web teması koyulaştırma veya kullanıcı aracısını kullanabilir koyulaştırılıyor:

• Web temasının koyulaşması: Web geliştiricileri Web sayfasının görünümünü kontrol etmek için @media (prefers-color-scheme: dark) koyu mod. WebView, içeriği bu ayarlara göre oluşturur. Şu konuda daha fazla bilgi için: karardığını fark ederseniz spesifikasyonunu içermelidir.
• Kullanıcı aracısı karartma: Web Görünümü, web'in renklerini otomatik olarak ters çevirir sayfasını ziyaret edin. User-agent karartma kullanıyorsanız, @media (prefers-color-scheme: dark) sorgusu false olarak değerlendiriliyor.

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

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

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ı İsteğe bağlı olarak <meta name="color-scheme" content="dark light"> etiketi, Android WebView'un varsayılan modu, meta etiketin web sayfasının varsayılan modunu prefers-color-scheme medya sorgusu. WebView'ları şununla kullanabilirsiniz: DARK_STRATEGY_WEB_THEME_DARKENING_ONLY modunda geçerlidir. Bu durumda, WebView, etiket atlandı.

  Ancak, web geliştiricilerin <meta name="color-scheme" content="dark light"> kendi web sitelerine etiket ekleyerek içeriğin Varsayılan yapılandırma.

• DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: "Kullanıcı aracısı karartma" adlı WebView, koyulaştırılan web sayfalarını yoksayar otomatik koyulaştırma özelliğini uygular.

Uygulamanız, prefers-color-scheme medya sorgusu, önerimiz: DARK_STRATEGY_WEB_THEME_DARKENING_ONLY webView'un özel temayı kullandığından emin olun.

Uygulanan koyu tema örneği için şuraya bakın: GitHub'da WebView demosu