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

אנדרה סיפריאני בנדרה
אנדרה סיפריאני בנדרה
X GitHub תקלה מסטודון דף הבית

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

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

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

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

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

עם כלי פיתוח

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

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

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

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

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

שימוש במטא תג

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

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

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

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

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

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

:root {
  color-scheme: only light;
}

שלח לנו משוב!

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

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

צילום: Félix Besombes