يدعم Github الوضع المظلم ووضع الضوء ، وبصفتنا مطورين ، يمكننا أن نجعل صور README تبدو رائعة في كلا الموضوعين. إليك دليل سريع لاستخدام
العنصر في ملفات GitHub Markdown لتبديل الصور ديناميكيًا استنادًا إلى نظام ألوان المستخدم.
متى يتحول المطورون إلى الوضع المظلم لـ GitHub (أو العكس)، يمكن أن تبدو الصور القياسية خارج المكان ، مع خلفيات مشرقة أو ألوان اشتباك.
بدلاً من إجبار صورة واحدة تناسب الجميع ، يمكنك تخصيص صورك لمزجها بسلاسة مع السمة. إنه تغيير بسيط ، لكنه يمكن أن يجعل مشروعك يبدو أكثر تلميعًا.
مقتطف واحد ، موضوعان!
إليك المقتطف السحري الذي يمكنك نسخه في ReadMe (أو أي ملف Markdown):
الآن ، نقول إنه سحر ، ولكن دعونا نلقي نظرة خاطفة خلف الستار لإظهار كيف يعمل:
- ال
تتيح لك العلامة تحديد مصادر صور متعددة لسيناريوهات مختلفة. - ال
السمة تطابق نظام ألوان المستخدم.- متى
media="(prefers-color-scheme: dark)"
، يحمل المتصفحsrcset
الصورة عندما يكون github في وضع الظلام. - وبالمثل ، متى
media="(prefers-color-scheme: light)"
، يحمل المتصفحsrcset
الصورة عندما يكون github في وضع الضوء.
- متى
- إذا لم يدعم المتصفح
العنصر ، أو نظام المستخدم لا يتطابق مع أي استعلامات وسائط محددة ، الاحتياطية
سيتم استخدام العلامة.
يمكنك استخدام هذا النهج في ملفات Repo ReadMe الخاصة بك ، والوثائق المستضافة على Github ، وأي ملفات مميزة أخرى يتم تقديمها على github.com!
العرض التوضيحي
ما هو أفضل من العرض التوضيحي لمساعدتك في البدء؟ هذا ما يبدو عليه هذا في الممارسة العملية:
كتبه
اترك تعليقاً