مظهر داكن تلقائي

André Cipriani Bandarra

يقدّم الإصدار 96 من Chrome مرحلة تجربة وتقييم لميزة "المظاهر الداكنة التلقائية" على Android. من خلال هذه الميزة، يطبّق المتصفّح مظهرًا داكنًا يتم إنشاؤه تلقائيًا على المواقع الإلكترونية ذات المظهر الفاتح، عندما يختار المستخدم المظاهر الداكنة في نظام التشغيل. يمكن للمستخدمين إيقاف المظاهر الداكنة من خلال إيقاف الخيار على مستوى نظام التشغيل أو في إعداد معيّن في Chrome.

الاشتراك في مرحلة التجربة والتقييم

يمكنك أيضًا تفعيل خوارزمية التعتيم للمستخدمين من خلال مرحلة التجربة والتقييم. يتيح لك ذلك اختبار أداء "المظهر الداكن التلقائي" في ما يتعلّق بمؤشرات الأداء الرئيسية.

انتقِل إلى المستندات للتعرّف على كيفية إعداد مرحلة التجربة والتقييم، ثم اشترِك في مرحلة التجربة والتقييم لميزة 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>-<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;
}

لا تزال واجهة برمجة التطبيقات الخاصة بتخصيص كل عنصر في مرحلة التطوير الأوّلي. نحن نعمل مع فِرق المعايير لتزويد المطوّرين بواجهة برمجة تطبيقات أكثر تعبيرًا لإيقاف هذه الميزة. يمكنك متابعة المحادثة حول هذه المشكلة على 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;
}

أرسِل إلينا ملاحظاتك.

لا يزال "المظهر الداكن التلقائي" قيد التحديد، ونحن نبحث عن ملاحظات في جميع مجالات التنفيذ: من نتائج خوارزمية التعتيم إلى واجهات برمجة التطبيقات للمطوّرين لتخصيص العناصر وإيقافها.

يمكنك إرسال ملاحظاتك إلينا من خلال قنوات متعدّدة:

الصورة من إعداد فيليكس بيزومب.