ב-Android מגרסה 10 ואילך, אפליקציה יכולה לתמוך בעיצוב כהה ולהחליף באופן אוטומטי בין עיצוב בהיר לעיצוב כהה בהתאם לעיצוב המערכת. כדי להתאים לעיצוב הנוכחי של האפליקציה, תוכלו גם להשתמש בסגנון בהיר, כהה או ברירת המחדל בתוכן האינטרנט ב-WebView.
ההתנהגות של WebView פועלת באופן הדדי עם תקני האינטרנט prefers-color-scheme
ו-color-scheme
. אם אתם כותבים את תוכן האינטרנט שאתם רוצים שהאפליקציה תציג ב-WebView, כדאי להגדיר עיצוב כהה לאתר ולהטמיע את prefers-color-scheme
כדי ש-WebView יוכל להתאים את העיצוב של תוכן האינטרנט לעיצוב של האפליקציה.
הטבלה הבאה מתארת איך WebView מעבד תוכן מהאינטרנט באפליקציה שלכם, בהתאם לסגנון התוכן באינטרנט ולתנאי האפליקציה:
תנאים של אפליקציות | תוכן אינטרנט שמשתמש ב-prefers-color-scheme |
תוכן אינטרנט שלא משתמש ב-prefers-color-scheme |
---|---|---|
האפליקציה משתמשת בעיצוב בהיר עם הערך isLightTheme שמוגדר כ-true או לא מוגדר. |
WebView מרינדר את התוכן בעיצוב בהיר שמחבר התוכן הגדיר. | WebView מעבד את התוכן בסגנון ברירת המחדל שהוגדר על ידי מחבר התוכן. |
האפליקציה משתמשת באילוץ כהה כדי להחיל עיצוב כהה באמצעות אלגוריתם על האפליקציה. | WebView מרינדר את התוכן בעיצוב הכהה שהגדיר מחבר התוכן. | אם מחבר התוכן מתיר זאת, רכיב WebView מעבד את התוכן עם עיצוב כהה שנוצר באמצעות אלגוריתם. |
האפליקציה משתמשת בעיצוב כהה עם הערך isLightTheme מוגדר ל-false , והאפליקציה לא מאפשרת עיבוי אלגוריתמי של WebView. |
WebView מעבד את התוכן עם העיצוב הכהה שמחבר התוכן הגדיר. | רכיב WebView מרינדר את התוכן עם סגנון ברירת המחדל שהוגדר על ידי מחבר התוכן. |
האפליקציה משתמשת בעיצוב כהה עם הערך isLightTheme שמוגדר כ-false , והאפליקציה מתירה
הכהיה אלגוריתמית של WebView. |
WebView מרינדר את התוכן בעיצוב הכהה שהגדיר מחבר התוכן. | אם מחבר התוכן מאפשר זאת, WebView ירנדר את התוכן עם עיצוב כהה שנוצר באמצעות אלגוריתם. |
עיצוב של מחברי תוכן
המאפיין isLightTheme
של האפליקציה מציין אם העיצוב של האפליקציה בהיר או כהה. מערכת WebView תמיד מגדירה את prefers-color-scheme
בהתאם ל-isLightTheme
. אם הערך של isLightTheme
הוא true
או לא צוין, הערך של prefers-color-scheme
הוא light
. אחרת, הערך הוא dark
.
המשמעות היא שאם תוכן האינטרנט משתמש ב-prefers-color-scheme
וכותב התוכן מאפשר זאת, העיצוב הבהיר או הכהה שהוגדר על ידי כותב התוכן תמיד יוחל באופן אוטומטי על תוכן האינטרנט כדי להתאים לעיצוב של האפליקציה.
האפלה אלגוריתמית
כדי לטפל במקרים שבהם תוכן אינטרנט לא משתמש ב-prefers-color-scheme
, האפליקציה יכולה לאפשר ל-WebView, במקרה הצורך, להחיל אלגוריתמית נושא כהה על תוכן האינטרנט שהוא מעבד.
אם באפליקציה שלכם נעשה שימוש ב-Force Dark ברמת האפליקציה כדי להחיל אלגוריתמית עיצוב כהה על האפליקציה, תוכלו לעיין בקטע הבא כדי לקבל מידע נוסף על איך מאפשרים האפלה אלגוריתמית של תוכן אינטרנט באמצעות Force Dark.
אם האפליקציה לא משתמשת ב-Force Dark, האופן שבו האפליקציה מציינת מתי לאפשר את ההכהה האלגוריתמית ב-WebView תלוי ברמת ה-API לטירגוט של האפליקציה. בקטע הבא מפורט מידע נוסף על אפליקציות שמטרגטות את Android מגרסה 13 ואילך ועל אפליקציות שמטרגטות את Android מגרסה 12 ומטה.
איך מאפשרים כהה אלגוריתמית של תוכן אינטרנט באמצעות הפעלה ידנית של מצב כהה
אם האפליקציה שלכם משתמשת באפשרות Force Dark ברמת האפליקציה, מערכת WebView מחילה כהה אלגוריתמית על תוכן האינטרנט אם מתקיימים התנאים הבאים:
- רכיב WebView ואלמנטי ההורה שלו מאפשרים את הפעלת התכונה 'הפעלה בכפייה של מצב כהה'.
- עיצוב הפעילות הנוכחי מסומן כבהיר, והערך של
isLightTheme
מוגדר כ-true
. - יוצר תוכן האינטרנט לא משבית את ההכהיה באופן מפורש.
- באפליקציות שמטרגטות ל-Android 13 (רמת API 33) ואילך, תוכן האינטרנט לא משתמש ב-
prefers-color-scheme
. - באפליקציות שמטרגטות ל-Android 12 (רמת API 32) ומטה: באפליקציה הוגדרה הגדרת
forceDarkMode
של WebView לערךFORCE_DARK_AUTO
והוגדרה אסטרטגיית Force Dark לערךDARK_STRATEGY_USER_AGENT_DARKENING_ONLY
.
אפשר לאפשר ל-WebView ולכל ההורים שלו להפעיל את התכונה 'מצב לילה' בכוח באמצעות View.setForceDarkAllowed()
.
ערך ברירת המחדל נלקח מהמאפיין setForceDarkAllowed()
של עיצוב Android, שגם הוא צריך להיות מוגדר כ-true
.
מצב כהה מאולץ מיועד בעיקר לתאימות לאחור באפליקציות שלא מציעות עיצוב כהה משלה. אם האפליקציה משתמשת באילוץ כהה, מומלץ להוסיף תמיכה לעיצוב כהה.
מתן הרשאה להכהיה אלגוריתמית (אפליקציות שמטרגטות ל-Android 13 ואילך)
באפליקציות שלא משתמשות ב-Force Dark ברמת האפליקציה ומטרגטות ל-Android 13 (רמת API 33) ואילך, צריך להשתמש בשיטה setAlgorithmicDarkeningAllowed()
של AndroidX ולהעביר את הערך true
כדי לציין ש-WebView צריך לאפשר הכהיה אלגוריתמית. השיטה הזו תואמת לגרסאות קודמות של Android.
לאחר מכן, WebView מחיל האפלה אלגוריתמית אם מתקיימים התנאים הבאים:
- תוכן האינטרנט לא משתמש ב-
prefers-color-scheme
. - יוצר תוכן האינטרנט לא משבית את ההכהיה באופן מפורש.
מתן הרשאה להכהיה אלגוריתמית (אפליקציות שמטרגטות ל-Android מגרסה 12 ומטה)
באפליקציות שלא משתמשות ב-Force Dark ברמת האפליקציה ומטרגטות את Android מגרסה 12 ואילך (רמת API 32), צריך להשתמש ב-FORCE_DARK_ON
כדי לאפשר הכהיה אלגוריתמית.
משתמשים ב-FORCE_DARK_ON
יחד עם FORCE_DARK_OFF
אם באפליקציה יש שיטה משלה למעבר בין עיצוב בהיר לעיצוב כהה, כמו רכיב שמאפשר החלפה בממשק המשתמש או בחירה אוטומטית לפי שעה.
כדי לבדוק אם התכונה נתמכת, מוסיפים את שורות הקוד הבאות בכל מקום שבו מגדירים את אובייקט ה-WebView, למשל ב-Activity.onCreate
:
Kotlin
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { WebSettingsCompat.setForceDark(...) }
Java
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { WebSettingsCompat.setForceDark(...); }
אם האפליקציה מסתמכת על זיהוי שינויים בהעדפות המערכת, היא צריכה להאזין באופן מפורש לשינויי עיצוב ולהחיל אותם על WebView עם מצבי FORCE_DARK_ON
ו-FORCE_DARK_OFF
.
קטע הקוד הבא מראה איך לשנות את הפורמט של העיצוב:
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; } }
התאמה אישית של הטיפול בעיצוב כהה
אפשר גם להשתמש ב-ForceDarkStrategy API ב-AndroidX כדי לקבוע איך המערכת מחילה את ההכהה על WebView נתון. ה-API הזה רלוונטי רק אם ההגדרה 'אילוץ כהה' מוגדרת ל-FORCE_DARK_ON
או ל-FORCE_DARK_AUTO
.
באמצעות ה-API, האפליקציה יכולה להשתמש בהכהת עיצוב האינטרנט או בהחשכה של סוכן משתמש:
- הכהת עיצוב אינטרנט: יכול להיות שמפתחי אתרים להחיל את המדיניות
@media (prefers-color-scheme: dark)
כדי לשלוט במראה של דף האינטרנט במצב כהה. WebView מרינדר את התוכן בהתאם להגדרות האלה. מידע נוסף על הכהיית עיצוב האתר זמין במפרט. - הכהיית סוכן המשתמש: WebView הופך באופן אוטומטי את הצבעים של דף האינטרנט. אם משתמשים בהסתרת סוכן המשתמש, הערך של השאילתה
@media (prefers-color-scheme: dark)
יהיהfalse
.
כדי לבחור בין שתי האסטרטגיות, משתמשים ב-API הבא:
Kotlin
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) { WebSettingsCompat.setForceDarkStrategy(...) }
Java
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) { WebSettingsCompat.setForceDarkStrategy(...); }
אפשרויות האסטרטגיה הנתמכות הן:
DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING
: זוהי אפשרות ברירת המחדל. רוב הדפדפנים מתייחסים לתג<meta name="color-scheme" content="dark light">
כאל תג אופציונלי, אבל במצב ברירת המחדל של Android WebView, המטא תג צריך לעמוד בקריאות המדיהprefers-color-scheme
של דף האינטרנט. אפשר להשתמש ברכיבי WebView במצבDARK_STRATEGY_WEB_THEME_DARKENING_ONLY
. במקרה כזה, רכיב ה-WebView מחיל תמיד שאילתות מדיה גם אם התג לא מופיע.עם זאת, אנחנו ממליצים למפתחי אתרים להוסיף את התג
<meta name="color-scheme" content="dark light">
לאתרים שלהם כדי לוודא שהתוכן ייגרם בצורה נכונה ב-WebViews עם הגדרת ברירת המחדל.DARK_STRATEGY_USER_AGENT_DARKENING_ONLY
: האפשרות הזו נקראת 'החשכה של סוכן משתמש', והיא מאפשרת ל-WebView להתעלם מהחשכה של דפי אינטרנט ולהחיל חשכה אוטומטית.
אם האפליקציה שלכם מציגה תוכן אינטרנט מאינטראקציה ישירה (First-Party) שהתאמתם באמצעות שאילתה של מדיה prefers-color-scheme
, מומלץ DARK_STRATEGY_WEB_THEME_DARKENING_ONLY
לוודא ש-WebView משתמש בנושא המותאם אישית.
דוגמה לעיצוב כהה שהוחל זמינה בהדגמה של WebView ב-GitHub.