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.
الخاتمة
هذا هو لهذه نصيحة سريعة! ما هي أفكارك حول ذلك؟ هل يجب أن يكون هذا شيئًا نطبقه في مواقعنا الإلكترونية؟ هل ستستخدمها؟ هل يتم دفع استعلامات الوسائط إلى أبعد مما ينبغي استخدامه؟ دعنا نعرف!
