لغة القالب

فتح روابط السلايدر في نافذة جديدة

الأقسام

أدوات

تابعنا

أنواع الوضع المظلم في منصة بلوجر وكيف تختار الأفضل من بينهم

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

أنواع الوضع المظلم

قبل أن ندخل في الأنواع أود أن أهنئكم بحلول شهر رمضان المبارك
كل عام وانتم بخير وتقبل الله منا ومنكم صالح الأعمال 🌷🌷🌷

النوع الأول اليدوي

وهو ذلك الزر الذي تجده في معظم المواقع والذي يقلب بين الوضعين
وهو الذي ستجد شروحات له تملأ المواقع العربية
ميزته الوحيدة أنه يمكنك بضغطة زر التنقل بين الوضعين في الموقع
عيوبه : ربما في غير منصة بلوجر يكون اختيار جيد , لكن في بلوجر هو ثقيل بطئ في الإستجابه فقد تدخل الموقع وتنتظر ثانية او ثانيتين حتى يفعل , يعتمد في تفعيله على أكواد أكثر ويعتمد على ثلاث لغات في عمله وهم HTML,CSS,JavaScript

النوع الثاني التلقائي أو ما أسميه بالحقيقي

هذا الوضع لم أرى أحد يقوم بشرح طريقة عمله في المواقع العربية , ربما هناك من شرحه لكن انا لم اصادف أحد قام بذلك ولا اعرف لماذا مع أنه الوضع الحقيقي لتلك التقنية في بلوجر , لكن من الجيد انه لم يشرحه الكثيرين هي فرصه لنا لنقدم لكم شئ جديد
هو وضع يعتمد فقط على الـ CSS مما يجعله أخف واسرع في الإستجابة من الوضع اليدوي
كذلك هو وضع يتعرف عليه المتصفح تلقائياً عندما تفعل النمط المظلم في متصفحك أو جهازك تلقائياً عند زيارتك للموقع سيعرض لك في هذا النمط
مثال للتجربة أحد قوالبي المدفوعة والتي تم تحديثها بهذا النمط
ان كان جهازك مفعل به الوضع سيعرض لك الموقع بالوضع المظلم تلقائياً
طيب أى الوضعين أختار؟
أظن انه من كلامي واضح أنني أميل للوضع التلقائي , لأن اليدوي  في رأيي هو عبارة عن اضافة Javascript لا أكثر ليس بوضع مظلم مناسب لبلوجر تركيبه وصناعته أصعب تعديله أصعب كل شئ فيه ليس جيد ما عدا امر انه يفعل بزر ولا أراها ميزة لكنها كذلك عند الكثيرين

كيف يمكنني تطبيق الوضع المظلم على قالبي؟

ليس من الممكن أن أعطيك كود يفعل لك تلقائياً الوضع المظلم على قالبك , لأن كل قالب اكواده مختلفة معرفات أجزاءه مختلفه
فلا يوجد كود سينجح مع كل القوالب او حتى معظمها
لكن أنا ساعطيك الأساس وبأقل خبرة لك في CSS يمكنك ضبطه على قالبك
كل ما عليك فعله ان تضيف الكود التالي فوق الوسم ]]></b:skin>
@media (prefers-color-scheme: dark) {
/*هنا أكواد CSS*/
}
ثم تحت جملة /*هنا أكواد CSS*/
أضف اكواد المظهر المظلم لديك 
ما هي تلك الاكواد؟
ببساطه عدل لون خلفية وخط وحواف كل جزء في قالبك لألوان داكنة
مثال بسيط لنقل ان هذا كلاس منطقة المواضييع لديك .post-body
سنضع له كود يغير لون خلفيته ولون النص ولون الحواف
.post-body {
background-color:#444;
color:#fff;
border-color:#eee;
}
طبعا هذا مثال فقط للتوضيح لكن هذا تقريباً ما ستحتاج تعديله في كل قالبك , تغيير لون خلفية المنطقة ولون النص فيها ولون الحواف
ان كنت تعرف فقط ان تغير خلفية ولون  حواف منطقة معينة فأظن هذا سيكون كافي لتنشئ مظهر بوضع مظلم لقالبك
ربما يزيد عليهم فقط تلوين أيقونات SVG ان كان قالبك يحتوي بعضها ممكن تستخدم هذا الكود لجعلها كلها باللون الأبيض
body svg {fill: #fff !important;}
وأعتذر مقدماً لن استطيع الإجابة على أى استفسارات تخص تطبيقك للوضع المظلم على قالبك , لأنني لو فتحت المجال ستكون الأسئلة كثيرة فلن أستطيع التجاوب مع أحدكم أحبابنا وتجاهل الآخرين ولن استطيع الرد على الجميع فأرجو تفهم الامر , لكن كما وضحت المبدأ سيكون واحد الإختلاف سيكون فقط في نظام نمط قالبك لكن هذه هي الألوان الاساسية التي ستحتاج تعديلها في معظم الاجزاء
وجرب تصفح موقعك في الوضع لتعرف ما الاجزاء التي ما تزال لم تعدلها لتعدلها
ولا تنسى طبعاً أخذ نسخة احتياطية من قالبك قبل أى تعديل
وبشكل عام ان لم يستجيب الوضع المظلم لك معناه انه ربما هناك اكواد CSS مهيمنة في قالبك فلا تجعل اى مظهر تضيفه
أمر أخير لمن سيجد صعوبه في الأمر
هذا الوضع عدم وجوده ليس عيب أو مشكلة في موقعك , هو ميزه بسيطه فقط ليست موجوده وليس عيب ,  وجودها امر جيد عدم وجودها لا يجعل من قلبك سئ او انه ناقص شئ لكن أنا اردت شرحها فقط لأنني تم سؤالي عنها كثيراً الفترة الماضية
وبالتوفيق للجميع
كن مدون : موقع متخصص في تطوير منصة بلوجر

مواضيع مقترحة

4التعليقات

نسعد بتعليقاتكم ومروركم , يرجى أن يكون التعليق في اطار الموضوع اى اسئلة أو تعليق يخص موضوع آخر او سؤال خارجي نعتذر عن عدم القدرة للرد عليه
  1. جزاك الله كل خير أستاذنا
    موضوع شيق وبامتياز ♥

    ردحذف
    الردود
    1. جزيتم بالمثل اخي الحبيب
      نورت الموضوع يا غالي
      وبالتوفيق ان شاء الله

      حذف
  2. أصبحت الـ CSS تقدم بأكواد بسيطة ما كانت تقدمه جافاسكربت بل وأفضل منها

    ردحذف
    الردود
    1. أهلا بك أخي الكريم , كلامك فيه شق صحيح , وهو ان لغة CSS تطورت كثيراً واصبحت المتصفحات تدعم أكواد ونظم جديدة للـ CSS تمكنها من فعل أمور لم تكن تفعلها سابقاً , وفعلاً بعض وظائف جافا سكريبت البسيطه , أصبح من الممكن آدائها بـ CSS وبطريقة أكثر فاعلية
      لكن هذا لا يضعهم في مقارنة , فوظيفة كل لغة منهم مختلفة تماماً ولا ينفع الإستغناء بواحده عن الأخرى
      والـ JavaScript منصة بلوجر نفسها قائمة على جزء منها يعني لكي نستخدم المنصة نفسها لن يحدث هذا بدون الجافا سكريبت
      فالثلاث لغات HTML , CSS ,JavaScript
      تكمل بعضها ولا ينفع ان تستخدم واحده دون الأخرى في صفحات انترنت
      لكن أنت على صواب أن لغة CSS تطورت كثيراً في الفترة الأخيرة

      حذف