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

André Cipriani Bandarra

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

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

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

כדי לקבל מידע נוסף, אפשר לעבור למסמכי התיעוד איך מגדירים גרסת מקור לניסיון, לאחר מכן נרשמים לגרסת המקור לניסיון של AutoDarkMode כדי לקבל אסימון.

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

עם כלי פיתוח

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

  1. לוחצים על תפריט שלוש הנקודות.
  2. בוחרים באפשרות More Tools ואז באפשרות רינדור.
  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>

ביטול הסכמה לכל רכיב

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

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

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

:root {
  color-scheme: only light;
}

שלח לנו משוב!

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

יש הרבה ערוצים שבהם תוכלו לשלוח לנו משוב:

צילום: Félix Besombes