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

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-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;
}

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

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

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

الصورة من تصوير فيليكس بيسونبيس.