شرح إضافة الوضع الليلي لموقعك خطوة بخطوة

شرح إضافة الوضع الليلي لموقعك خطوة بخطوة بطريقة احترافية

إذا كنت تبحث عن أفضل طريقة من أجل إضافة الوضع الليلي لموقعك فأنت في المكان الصحيح. تفعيل الوضع الليلي أو الوضع المظلم للموقع أصبح اليوم من أساسيات تصميم مواقع احترافية تهتم بـ تحسين تجربة المستخدم ورفع جودة واجهة المستخدم وتحسين تجربة القراءة خاصة في الليل.

شرح إضافة الوضع الليلي لموقعك خطوة بخطوة.

الإجابة المختصرة هي أنك تحتاج إلى ثلاث خطوات أساسية. إنشاء ثيم داكن عبر أكواد CSS. إضافة زر تغيير الثيم باستخدام HTML. ثم استخدام JavaScript من أجل تبديل الوضع الليلي وحفظ تفضيل المستخدم عبر Local Storage.

في هذا الدليل الشامل سوف أشرح لك كيفية إضافة الوضع الليلي سواء كنت تستخدم HTML عادي أو قالب ووردبريس أو حتى الوضع الليلي في بلوجر. سأشاركك أكواد CSS وأكواد JavaScript جاهزة مع شرح عميق لطريقة عملها. كما سنناقش تأثير Dark Mode على SEO و Core Web Vitals وسرعة الموقع.

ما هو الوضع الليلي ولماذا يجب إضافته إلى موقعك

الوضع الليلي أو Dark Mode هو نمط عرض يعتمد على خلفية داكنة ونص فاتح بدلا من الخلفية البيضاء التقليدية المعروفة باسم Light Mode. الهدف الأساسي هو تقليل إجهاد العين وتحسين تجربة القراءة خاصة في الإضاءة المنخفضة.

• تحسين تجربة المستخدم UX بشكل ملحوظ خاصة أثناء التصفح الليلي
• تقليل استهلاك الطاقة في الشاشات من نوع OLED حسب تقارير Google الرسمية
• زيادة مدة بقاء الزائر داخل الموقع وهو عامل مهم في تحسين السيو SEO
• إضفاء لمسة احترافية على تصميم مواقع حديثة

إضافة الوضع المظلم للموقع لم تعد ميزة إضافية بل أصبحت معيارا أساسيا في تصميم واجهة المستخدم الحديثة.

الفرق بين Light Mode و Dark Mode

طريقة إضافة الوضع الليلي باستخدام HTML و CSS و JavaScript

الخطوة الأولى إنشاء أكواد CSS للوضع المظلم

سنبدأ بإنشاء ثيم داكن باستخدام أكواد CSS بسيطة تعتمد على كلاس يتم إضافته إلى عنصر body.

<style>
body.dark-mode{
  background:#121212;
  color:#f1f1f1;
}
body.dark-mode a{
  color:#4dabf7;
}
</style>

بهذه الطريقة عند إضافة الكلاس dark mode إلى body سيتم تبديل الألوان مباشرة.

الخطوة الثانية إضافة زر الوضع الليلي

<button id="toggleDark">تبديل الوضع الليلي</button>

يمكنك تنسيق زر تغيير الثيم باستخدام CSS بما يتناسب مع تصميم متجاوب خاص بقالبك.

الخطوة الثالثة إضافة JavaScript لتفعيل تبديل الوضع الليلي

<script>
const toggleBtn = document.getElementById("toggleDark");

toggleBtn.onclick = function(){
  document.body.classList.toggle("dark-mode");

  if(document.body.classList.contains("dark-mode")){
    localStorage.setItem("theme","dark");
  }else{
    localStorage.setItem("theme","light");
  }
};

window.onload = function(){
  if(localStorage.getItem("theme") === "dark"){
    document.body.classList.add("dark-mode");
  }
};
</script>

بهذا نكون قد انتهينا من شرح إضافة الوضع الليلي مع حفظ تفضيل المستخدم عبر Local Storage.

إضافة الوضع الليلي لبلوجر خطوة بخطوة

إذا كنت تستخدم بلوجر فيمكنك بسهولة إضافة الوضع الليلي لبلوجر من خلال لوحة التحكم.

1. الدخول إلى لوحة تحكم بلوجر ثم المظهر ثم تعديل HTML
2. إضافة أكواد CSS الخاصة بالوضع المظلم داخل وسم style
3. إضافة زر الوضع الليلي داخل الهيدر أو القائمة
4. إضافة أكواد JavaScript قبل إغلاق body

يمكنك الاطلاع على منصة بلوجر الرسمية عبر الرابط التالي https://www.blogger.com

تفعيل الوضع الليلي التلقائي حسب إعدادات النظام

يمكنك جعل الوضع الليلي يعمل تلقائيا حسب إعدادات جهاز المستخدم باستخدام CSS media query.

@media (prefers-color-scheme: dark){
  body{
    background:#121212;
    color:#ffffff;
  }
}

هذه الطريقة تجعل الموقع يدعم Dark Theme تلقائيا دون الحاجة إلى ضغط زر.

تأثير الوضع المظلم على تحسين السيو و Core Web Vitals

الوضع الليلي بحد ذاته ليس عامل ترتيب مباشر في Google. لكن تأثيره غير المباشر قوي جدا.

• تحسين تجربة القراءة مما يزيد مدة الجلسة
• تقليل معدل الارتداد
• تحسين تجربة المستخدم وهو عنصر أساسي في SEO الحديث
• عدم التأثير على سرعة الموقع إذا تم برمجته بطريقة صحيحة

يمكنك مراجعة إرشادات تجربة الصفحة عبر Google Search Central https://developers.google.com/search/docs

أفضل ممارسات احترافية عند تطوير الوضع الليلي

• عدم استخدام اللون الأسود الكامل بل اختيار درجة داكنة مريحة
• اختبار التباين لضمان وضوح النصوص
• عدم عكس الصور تلقائيا إلا إذا لزم الأمر
• اختبار التصميم على الهاتف ضمن إطار تصميم متجاوب
• تجنب تحميل ملفات CSS إضافية ضخمة تؤثر على الأداء

الوضع الليلي الناجح هو الذي يحافظ على هوية العلامة التجارية ولا يكتفي فقط بعكس الألوان.

خلاصة الدليل

شرح إضافة الوضع الليلي لموقعك ليس معقدا كما يعتقد البعض. باستخدام HTML و CSS و JavaScript يمكنك إنشاء نظام احترافي يسمح بتبديل الألوان وحفظ تفضيل المستخدم وتحسين واجهة المستخدم بشكل واضح.

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

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