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

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.