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

André Cipriani Bandarra

يوفّر 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;
}

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

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

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

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