المعاينات والمرفقات
الوضع المظلم : معروف أيضاً بالوضع الليلي والوضع الغامق , هو عبارة عن نمط
في مظهر الموقع يمكن الزائر من تصفح الموقع بنمط الوان داكن , والهدف من هذا الأمر
هو راحة لعين الزائر خصوصاً ان كان في مكان منخفض الإضاءة أو كان في الليل فتعريض
العين للألوان الفاتحة يكون مرهق للعين فأصبحت المواقع تتبنى هذا النمط اللوني كنوع
من الإضافة على مميزات التصفح لزوارها
كل عام وانتم بخير وتقبل الله منا ومنكم صالح الأعمال 🌷🌷🌷
أنواع الوضع المظلم
قبل أن ندخل في الأنواع أود أن أهنئكم بحلول شهر رمضان المبارككل عام وانتم بخير وتقبل الله منا ومنكم صالح الأعمال 🌷🌷🌷
النوع الأول اليدوي
وهو ذلك الزر الذي تجده في معظم المواقع والذي يقلب بين الوضعين
وهو الذي ستجد شروحات له تملأ المواقع العربية
ميزته الوحيدة أنه يمكنك بضغطة زر التنقل بين الوضعين في الموقع
عيوبه : ربما في غير منصة بلوجر يكون اختيار جيد , لكن في بلوجر هو ثقيل بطئ في
الإستجابه فقد تدخل الموقع وتنتظر ثانية او ثانيتين حتى يفعل , يعتمد في تفعيله
على أكواد أكثر ويعتمد على ثلاث لغات في عمله وهم 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
الاشتراك في:
تعليقات الرسالة (Atom)
جزاك الله كل خير أستاذنا
ردحذفموضوع شيق وبامتياز ♥
جزيتم بالمثل اخي الحبيب
حذفنورت الموضوع يا غالي
وبالتوفيق ان شاء الله
أصبحت الـ CSS تقدم بأكواد بسيطة ما كانت تقدمه جافاسكربت بل وأفضل منها
ردحذفأهلا بك أخي الكريم , كلامك فيه شق صحيح , وهو ان لغة CSS تطورت كثيراً واصبحت المتصفحات تدعم أكواد ونظم جديدة للـ CSS تمكنها من فعل أمور لم تكن تفعلها سابقاً , وفعلاً بعض وظائف جافا سكريبت البسيطه , أصبح من الممكن آدائها بـ CSS وبطريقة أكثر فاعلية
حذفلكن هذا لا يضعهم في مقارنة , فوظيفة كل لغة منهم مختلفة تماماً ولا ينفع الإستغناء بواحده عن الأخرى
والـ JavaScript منصة بلوجر نفسها قائمة على جزء منها يعني لكي نستخدم المنصة نفسها لن يحدث هذا بدون الجافا سكريبت
فالثلاث لغات HTML , CSS ,JavaScript
تكمل بعضها ولا ينفع ان تستخدم واحده دون الأخرى في صفحات انترنت
لكن أنت على صواب أن لغة CSS تطورت كثيراً في الفترة الأخيرة
اتمني تحديث المقال وإضافة الميزة كاملة جزاك الله خيرا.. نحن مبتدئين 🤍
ردحذفأهلا ومرحباً بك , شكراً لك على المرور.
حذفبالنسبة لطلبك لا يمكن اضافة الميزة كاملة بحيث يمكن تركيبها على أى قالب , لان القوالب الوانها تختلف ومعرفاتها تختلف فانا شرحت المبدأ ويجب كل شخص أن يحاول ايجاد المعرفات الخاصة بقالبه وعمل تعديل الألوان عليها ليعمل بشكل مضبوط , الموضوع في تلك الحالة مكتمل لأن هذا ما يمكن وضعه كأمر عام لكل القوالب , لكن عمل ستايل معين سيعمل فقط على القالب الذي تم عمله عليه
أشكرك علي الاهتمام والرد
ردحذفلكن يمكنك تبسيط الأمور أكثر للمبتدئين فهل تستطيع شرح كيفية البحث تحديدا عن الكلاس ؟
وما هي اهم الكاسات التي لابد من إدراجها في الكود ؟
كل عنصر أخي الكريم يكون له class أو id
حذف<div class="tools extras" id="main-tool">
انت تستخم فقط واحد منهم والأفضل دائما يكون الكلاس
الكلاس في هذا المثال كلمتين tools extras تستخدم واحه منهم فقط ككلاس
لو لم تجد كلاس للعنصر ممكن تضيف انت له كلاس بنفس الطريقة , لكن في رأيي أن تستخدم قالب به وضع مظلم من البداية أفضل
شكرا يا استاذ عمرو جزاك الله خيرا كثيرا
ردحذفتم تركيب الإضافة بنجاح 🖤
الحمد لله أخي الكريم , والعفو يسرني انك استطعت التعامل معها
حذفتحياتي لك 🌹