نصيحة سريعة: كيفية تنفيذ الوضع المظلم في موقع الويب الخاص بك باستخدام استعلامات الوسائط

Arabic (العربية/عربي) translation by Asaad (you can also view the original English article)

في نصيحة +Envato Tuts السريعة هذه ، سنلقي نظرة على إحدى ميزات CSS التجريبية التي تكتشف ما إذا كان المستخدم قد تم تمكين "الوضع المظلم" على أجهزة Mac. ويتم ذلك عبر استعلام وسائط ، وسيسمح لك بتصميم موقع ويب "مظلم" أو "مضئ" وفقًا لذلك. لنلقي نظرة!

كيفية تنفيذ "الوضع المظلم" عبر CSS

ما هو "الوضع المظلم"؟

في العام الماضي ، أدخلت MacOS Mojave طريقة للتبديل بين الوضع "المظلم" و "الفاتح" (يمكن أن يكون الوضع المظلم أسهل بكثير على العيون ، خاصة في ظروف الإضاءة المنخفضة). يؤثر هذا التبديل على واجهة المستخدم ، مما يؤدي إلى تغيير المظهر المرئي لعناصر مثل أشرطة القوائم واللوحات والأزرار وما إلى ذلك.

بعيدًا عن واجهة مستخدم MacOS ، يكون هذا الإعداد مفتوحًا أيضًا للتطبيقات الأخرى ، لذلك ستتبدل التطبيقات التي تستفيد منها أيضًا بين الإصدارات المظلمة والإضاءة وفقًا لتفضيل المستخدم.

"الوضع المظلم" في CSS

باستخدام الاستعلام عن الوسائط المفضلة في نظام الألوان ، يمكننا الاستفادة من إعداد الوضع المظلم هذا في مواقعنا الإلكترونية أيضًا. تبدو الصيغة كالتالي:

@media (prefers-color-scheme: dark) {
     body {
      /* dark styles here */
  	}
}

يمكننا استخدام الظلام أو الضوء كقيم داخل استعلام الوسائط. في المثال أعلاه ، سنذكر أنه في حالة تمكين وضع الظلام في المستخدم ، سنطبّق بعض الأنماط المختلفة. جرِّب العرض التوضيحي أدناه عن طريق تبديل مظهرك المظلم / الفاتح:

المحذورات

تحذير: هذا كله تجريبي للغاية. منذ وقت كتابة هذه الميزة ، لا تعمل هذه الميزة إلا في متصفح واحد: Safari Technology Preview. ومع ذلك ، تجري مناقشته في مجموعات العمل ، ونرى بالفعل لمحات منه في شفرة مصدر Webkit.

الخاتمة

هذا هو لهذه نصيحة سريعة! ما هي أفكارك حول ذلك؟ هل يجب أن يكون هذا شيئًا نطبقه في مواقعنا الإلكترونية؟ هل ستستخدمها؟ هل يتم دفع استعلامات الوسائط إلى أبعد مما ينبغي استخدامه؟ دعنا نعرف!