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

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.