- إنضم
- 06/04/2026
- المشاركات
- 72
دليل المطورين: كيفية تثبيت الوضع الداكن كخيار افتراضي في XenForo 2.3
يعتبر الوضع الداكن (Dark Mode) اليوم ضرورة وليس مجرد رفاهية. في هذا الشرح، سنتناول الطريقة الصحيحة لإجبار المنتدى على اعتماد الثيم الداكن كخيار أساسي للزوار والأعضاء، مع حل مشكلة "الوميض الأبيض" التي تواجه الكثيرين عند تحديث الصفحة.
تعيين الستايل الداكن كافتراضي
الخطوة الأولى تبدأ من لوحة التحكم للتأكد من أن النظام يوجه الزوار للستايل الصحيح:
ضبط خصائص الستايل (Style Properties)
في النسخ الحديثة، يجب إخبار المحرك أن التباين الافتراضي هو الداكن:
التعديل البرمجي القسري (للمحترفين)
لضمان عدم عودة المتصفح للوضع الفاتح تلقائياً، قم بتعديل قالب PAGE_CONTAINER واستبدل وسم الـ HTML بالآتي:
حل مشكلة الوميض الأبيض (CSS)
أضف الكود التالي في قالب extra.less لمنع المتصفح من عرض خلفية بيضاء أثناء تحميل الملفات:
نصيحة إضافية من 4rNET:
بعد تطبيق هذه التغييرات، تأكد دائماً من مسح الكاش (Cache) من لوحة التحكم ومن متصفحك. إذا كنت تستخدم Cloudflare، قم بعمل Purge Everything لتظهر التعديلات فوراً للزوار الجدد.
________________________________
تم إعداد هذا الشرح بواسطة: مهدي حميد - إدارة 4rNET
يعتبر الوضع الداكن (Dark Mode) اليوم ضرورة وليس مجرد رفاهية. في هذا الشرح، سنتناول الطريقة الصحيحة لإجبار المنتدى على اعتماد الثيم الداكن كخيار أساسي للزوار والأعضاء، مع حل مشكلة "الوميض الأبيض" التي تواجه الكثيرين عند تحديث الصفحة.
الخطوة الأولى تبدأ من لوحة التحكم للتأكد من أن النظام يوجه الزوار للستايل الصحيح:
- توجه إلى: Appearance > Styles.
- الاختيار: قم بتحديد الدائرة بجانب الستايل الداكن ليكون هو الـ Default.
- إغلاق الفتحات: تأكد من إلغاء تفعيل Allow user selection للستايلات الفاتحة إذا كنت ترغب في توحيد المظهر.
في النسخ الحديثة، يجب إخبار المحرك أن التباين الافتراضي هو الداكن:
- انتقل إلى: Style properties > Basic options.
- تعديل التزامن: ابحث عن Color scheme synchronization واجعلها Manual.
- الخيار الأساسي: اجعل Default color scheme على خيار Dark.
لضمان عدم عودة المتصفح للوضع الفاتح تلقائياً، قم بتعديل قالب PAGE_CONTAINER واستبدل وسم الـ HTML بالآتي:
كود:
<html id="XF" lang="{$xf.language.language_code}"
data-variation="dark"
data-color-scheme="dark"
data-style-variation="dark">
أضف الكود التالي في قالب extra.less لمنع المتصفح من عرض خلفية بيضاء أثناء تحميل الملفات:
كود:
:root {
color-scheme: dark !important;
}
html, body {
background-color: #121212 !important;
color: #e0e0e0 !important;
}
بعد تطبيق هذه التغييرات، تأكد دائماً من مسح الكاش (Cache) من لوحة التحكم ومن متصفحك. إذا كنت تستخدم Cloudflare، قم بعمل Purge Everything لتظهر التعديلات فوراً للزوار الجدد.
________________________________
تم إعداد هذا الشرح بواسطة: مهدي حميد - إدارة 4rNET