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:
Uygulama koşulları | prefers-color-scheme kullanan web içeriği |
prefers-color-scheme kullanmayan web içeriği |
---|---|---|
Uygulama, şununla birlikte açık bir tema kullanıyor:
isLightTheme .
true değerine ayarlanır veya ayarlanmadan bırakılırsa |
WebView, içeriği gördüğünüz açık temayla içerik yazarının tanımladığı. | WebView, içeriği içerik yazarıyım. |
Uygulama şunu kullanıyor: Koyuluğu Zorunlu Kıl - koyu temayı algoritmik olarak uygulama uygulamaya geri dönelim. | WebView, içeriği otomatik olarak devre dışı bırakan koyu temayla içerik yazarının tanımladığı. | İçerik yazarı izin verirse WebView, içeriği bir koyu tema oluşturabilirsiniz. |
Uygulamada şu koyu tema kullanılıyor:
isLightTheme .
false olarak ayarlanmış ve uygulama algoritmik izin vermiyor
WebView için koyulaştırılıyor. |
WebView, içeriği otomatik olarak devre dışı bırakan koyu temayla içerik yazarının tanımladığı. | WebView, içeriği içerik yazarıyım. |
Uygulamada şu koyu tema kullanılıyor:
isLightTheme .
false olarak ayarlandıysa ve uygulama izin verdiğinde
WebView için algoritmaya dayalı koyulaştırma. |
WebView, içeriği otomatik olarak devre dışı bırakan koyu temayla içerik yazarının tanımladığı. | İçerik yazarı izin verirse WebView, içeriği bir koyu tema oluşturabilirsiniz. |
İç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 stratejisiniDARK_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
):
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ı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:
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 ş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)
sorgusufalse
olarak değerlendiriliyor.
İ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ı İ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 modunuprefers-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