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

أندريه سيبرياني باندارا

يقدّم Chrome 96 تجربة مصدر لميزة "المظاهر الداكنة تلقائيًا" على نظام التشغيل 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-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;
}

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

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

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

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

تصوير فيليكس بيسومبيس