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

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

المعاينات والمرفقات

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

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

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

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

وهو ذلك الزر الذي تجده في معظم المواقع والذي يقلب بين الوضعين
وهو الذي ستجد شروحات له تملأ المواقع العربية
ميزته الوحيدة أنه يمكنك بضغطة زر التنقل بين الوضعين في الموقع
عيوبه : ربما في غير منصة بلوجر يكون اختيار جيد , لكن في بلوجر هو ثقيل بطئ في الإستجابه فقد تدخل الموقع وتنتظر ثانية او ثانيتين حتى يفعل , يعتمد في تفعيله على أكواد أكثر ويعتمد على ثلاث لغات في عمله وهم 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 مهيمنة في قالبك فلا تجعل اى مظهر تضيفه
أمر أخير لمن سيجد صعوبه في الأمر
هذا الوضع عدم وجوده ليس عيب أو مشكلة في موقعك , هو ميزه بسيطه فقط ليست موجوده وليس عيب ,  وجودها امر جيد عدم وجودها لا يجعل من قلبك سئ او انه ناقص شئ لكن أنا اردت شرحها فقط لأنني تم سؤالي عنها كثيراً الفترة الماضية
وبالتوفيق للجميع

تعليقات

10

- شاركنا بتعليق فتعليقك يخبرنا بمدى جدوى ما نقدمه
- تشجيعك أو النقد البناء عاملين أساسيين لتطوير محتوانا
- كذلك لو لديك سؤال حول محتوى الموضوع أو شئ نسينا ذكره يرجى مشاركتنا به

  1. جزاك الله كل خير أستاذنا
    موضوع شيق وبامتياز ♥

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

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

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

      حذف
  3. اتمني تحديث المقال وإضافة الميزة كاملة جزاك الله خيرا.. نحن مبتدئين 🤍

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

      حذف
  4. أشكرك علي الاهتمام والرد
    لكن يمكنك تبسيط الأمور أكثر للمبتدئين فهل تستطيع شرح كيفية البحث تحديدا عن الكلاس ؟

    وما هي اهم الكاسات التي لابد من إدراجها في الكود ؟

    ردحذف
    الردود
    1. كل عنصر أخي الكريم يكون له class أو id
      <div class="tools extras" id="main-tool">
      انت تستخم فقط واحد منهم والأفضل دائما يكون الكلاس
      الكلاس في هذا المثال كلمتين tools extras تستخدم واحه منهم فقط ككلاس
      لو لم تجد كلاس للعنصر ممكن تضيف انت له كلاس بنفس الطريقة , لكن في رأيي أن تستخدم قالب به وضع مظلم من البداية أفضل

      حذف
  5. شكرا يا استاذ عمرو جزاك الله خيرا كثيرا
    تم تركيب الإضافة بنجاح 🖤

    ردحذف
    الردود
    1. الحمد لله أخي الكريم , والعفو يسرني انك استطعت التعامل معها
      تحياتي لك 🌹

      حذف