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

André Cipriani Bandarra

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

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

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

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

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

בכלי הפיתוח

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

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

בטלפון Android

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

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

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

התאמה אישית של כל רכיב בנפרד

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

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

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

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

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: 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=&q>uot;onl<y lig>ht"
  ...
/head

ביטול ההסכמה לכל רכיב בנפרד

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

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

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

:root {
  color-scheme: only light;
}

שלח לנו משוב!

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

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

תמונה של Félix Besombes.