עיצוב כהה אוטומטי

André Cipriani Bandarra

בגרסה 96 של Chrome אנחנו משיקים גרסת מקור לניסיון של עיצובים כהים אוטומטיים ב-Android. בעזרת התכונה הזו, הדפדפן מחיל עיצוב כהה שנוצר באופן אוטומטי על אתרים עם עיצוב בהיר, אם המשתמש בחר להשתמש בעיצובים כהים במערכת ההפעלה. המשתמשים יכולים לבטל את ההסכמה לשימוש בעיצובים כהים על ידי השבתת האפשרות ברמת מערכת ההפעלה או בהגדרה ספציפית ב-Chrome.

הרשמה לתקופת הניסיון של גרסת המקור

אפשר גם להפעיל את אלגוריתם ההכהה למשתמשים באמצעות ניסיון מקור. כך תוכלו לבדוק את הביצועים של המצב 'עיצוב כהה אוטומטי' ביחס למדדי ה-KPI שלכם.

במאמר בנושא תיעוד מוסבר איך מגדירים גרסת טרום-השקה לאתר, ואז צריך להירשם לגרסת הטרום-השקה של AutoDarkMode לאתר כדי לקבל טוקן.

איך בודקים את העיצוב הכהה האוטומטי במכשיר

באמצעות כלי הפיתוח

כדי להפעיל את העיצוב הכהה האוטומטי בכלי הפיתוח:

  1. לוחצים על תפריט שלוש הנקודות.
  2. בוחרים באפשרות More Tools (כלים נוספים) ואז באפשרות Rendering (עיבוד).
  3. בוחרים באפשרות הפעלה לצד האפשרות הפעלת אמולציה של מצב כהה אוטומטי.

בטלפון Android

כדי לבדוק את העיצוב הכהה האוטומטי בטלפון Android:

  1. עוברים אל chrome://flags ומפעילים את הניסוי #darken-websites-checkbox-in-theme-setting.
  2. לאחר מכן, מקישים על תפריט שלוש הנקודות, בוחרים באפשרות הגדרות ואז באפשרות עיצוב, ומסמנים את התיבה החלת עיצוב כהה על אתרים, כשאפשר.

מעכשיו, דפים בהירים יהיו כהים יותר בטלפון.

התאמה אישית לכל רכיב

אנחנו שואפים שהמצב 'עיצוב כהה אוטומטי' יניב תוצאות טובות בכל המקרים, אבל בשיחות מוקדמות עם מפתחים הם הביעו רצון לשנות רכיבים ספציפיים כדי להתאים את העיצוב למראה ולתחושה הרצויים.

במהלך תקופת הניסיון הזו, אפשר לבצע התאמות אישיות באמצעות JavaScript כדי לזהות אם המשתמש מוגדר ל'מצב כהה אוטומטי', ואז להתאים אישית את הרכיבים הרצויים.

זיהוי של עיצוב כהה אוטומטי

כדי לזהות אם המשתמש נמצא במצב 'עיצוב כהה אוטומטי', יוצרים רכיב עם הערך background-color מוגדר כ-canvas וערכת הצבעים מוגדרת כ'בהיר'. אם הצבע המחושב של הרקע הוא לא לבן (rgb(255, 255, 255)), חל על הדף עיצוב כהה אוטומטי.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

התאמה אישית של כמות גדולה של רכיבים

יכול להיות שיהיה קשה להתאים את הפתרון שלמעלה למספר גדול יותר של רכיבים. אפשרות אחרת היא להשתמש בזיהוי אוטומטי של מצב כהה כדי להוסיף סיווג של סמן לגוף הדף:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

לאחר מכן, משתמשים ב-CSS כדי להתאים אישית את הרכיבים לפי הצורך:

.auto-dark-theme > #my-element {
  border-color: red;
}

ממשק ה-API להתאמה אישית לכל רכיב עדיין נמצא בשלבים מוקדמים של פיתוח. אנחנו עובדים עם צוותי התקנים כדי לספק למפתחים ממשק API יעיל יותר לביטול ההסכמה. אפשר לעקוב אחרי השיחה בבעיה הזו ב-GitHub.

איך מבטלים את ההסכמה לשימוש בעיצוב כהה אוטומטי

בנוסף לכבוד לבחירה של המשתמש במכשיר, עיצובים כהים מספקים למשתמשים יתרונות כמו שיפור חיי הסוללה ונגישות. במקום לבטל את העיצוב הכהה האוטומטי, מומלץ מאוד להטמיע עיצוב כהה מותאם אישית משלכם, כדי לכבד את העדפות המשתמשים וליהנות מהיתרונות האלה.

עם זאת, אם אין לכם אפשרות להטמיע עיצוב כהה משלכם והתוצאה שנוצרת על ידי העיצוב הכהה האוטומטי לא מספקת, תוכלו לבטל את ההסכמה לשימוש בתכונה.

שימוש במטא תג

האפשרות הראשונה לביטול ההסכמה לשימוש בעיצוב כהה אוטומטי היא להוסיף את המטא תג הבא לכותרת הדף. היתרון של השימוש בתג המטא הוא שהוא מונע את החלת העיצוב הכהה האוטומטי בכלל, דבר שעלול לגרום ל'הבהוב של תוכן כהה'.

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

ביטול הסכמה לכל אלמנט

אפשרות נוספת לביטול ההסכמה היא להגדיר את הערך של מאפיין ה-CSS color-scheme לערך only light. אפשר להשתמש בביטול ההסכמה לכל רכיב כדי לבטל את ההסכמה של כל הדף למצב כהה אוטומטי, אבל היתרון של הגישה הזו הוא שאפשר לבטל את ההסכמה רק לחלקים ספציפיים בדף:

#my-element {
  color-scheme: only light;
}

עדיין אפשר להשתמש בגישה הזו כדי לבטל את ההצטרפות של הדף כולו למצב כהה אוטומטי על ידי הגדרת ערכת הצבעים ברכיב :root:

:root {
  color-scheme: only light;
}

שלח לנו משוב!

אנחנו עדיין ממשיכים לפתח את העיצוב הכהה האוטומטי, ואנחנו מחפשים משוב בכל תחומי ההטמעה: החל מתוצאות האלגוריתם להכהיית המסך ועד לממשקי ה-API למפתחים לצורך התאמה אישית של רכיבים וביטול ההסכמה.

יש הרבה דרכים לשלוח לנו משוב:

צילום: Félix Besombes.