يشرح هذا الدليل كيفية إعداد لوحات ألوان الوضع الفاتح والداكن لمظهر موقع Discourse الخاص بك. ويغطي إعدادات التهيئة الخاصة بكل مظهر، وتعيين اللوحة، واعتبارات واجهة المستخدم.
مستوى المستخدم المطلوب: مسؤول
يتيح لك تكوين لوحات ألوان مميزة للوضع الفاتح والداكن عرض مجتمع Discourse الخاص بك بطريقة تتماشى مع علامتك التجارية، وتحسين إمكانية الوصول، ومنح المستخدمين القدرة على التحكم في تجربة المشاهدة الخاصة بهم. تتيح لك التحسينات الأخيرة لنظام المظاهر في Discourse تعيين لوحة فاتحة وداكنة مفضلة لكل مظهر، والسماح للمستخدمين باختيار المظهر الذي يريدونه.
ملخص
يغطي هذا الدليل:
- فهم تعيينات لوحات ألوان الوضع الفاتح والداكن
- تعيين لوحات ألوان فاتحة وداكنة لمظهر
- إدارة لوحات ألوان موقعك
- تمكين محدد وضع الألوان للمستخدمين
- فهم الخيارات التي يراها المستخدم
- أفضل الممارسات لاستخدام اللوحة وإمكانية الوصول
فهم تعيينات لوحات ألوان الوضع الفاتح والداكن
تدعم مظاهر Discourse تعيينًا صريحًا لكل من لوحة ألوان “فاتحة” و “داكنة”. بهذه الطريقة، يمكن لأي مظهر التبديل تلقائيًا بناءً على إعدادات نظام المستخدم، أو السماح للمستخدم باختيار الوضع المفضل، مع الحفاظ على ألوان علامتك التجارية المفضلة.
تعيين لوحات الألوان الفاتحة والداكنة لمظهر
لتهيئة لوحات ألوان المظهر الخاص بك:
انتقل إلى المسؤول > المظهر > المظاهر والمكونات (
/admin/config/customize/themes)انقر على المظهر الذي تريد تعديله.
في إعدادات المظهر، حدد موقع قسم لوحات الألوان (Color palettes).
لكل من لوحة الألوان (Color Palette) و لوحة الألوان الداكنة (Dark Color Palette)، حدد اللوحة التي تريد استخدامها.
انقر على حفظ (Save) في أسفل صفحة إعدادات المظهر.
يضمن هذا أن يستخدم مظهر موقعك اللوحة الصحيحة لمستخدمي الوضع الفاتح والداكن على حد سواء. لاحظ أنه لا يزال بإمكان الأعضاء تحديد لوحات أخرى قابلة للاختيار من قبل المستخدم، لكن تلك التي تحددها هنا ستكون هي الافتراضيات.
إدارة لوحات الألوان الخاصة بك
يمكن إدارة جميع لوحات الألوان المتاحة (وتعييناتها المرتبطة) مركزيًا:
انتقل إلى المسؤول > المظهر > لوحات الألوان (
/admin/config/colors)هنا يمكنك تحرير أو إضافة أو إزالة اللوحات، ووضع علامة عليها كقابلة للاختيار من قبل المستخدم، وتعيينها كلوحات فاتحة وداكنة افتراضية للمظهر الخاص بك.
تمكين محدد وضع الألوان
قبل أن يتمكن المستخدمون من التبديل بين الوضع الفاتح والداكن على الموقع، يجب عليك تمكين إعداد الموقع
interface_color_selector. القيمة الافتراضية لهذا الإعداد هي معطل (disabled).لتمكينه:
- انتقل إلى المسؤول > الإعدادات (Admin > Settings) وابحث عن
interface color selector.- قم بتعيينه على أحد الخيارات التالية:
- العرض في تذييل الشريط الجانبي (Display in sidebar footer) — يضيف تبديلًا فاتح/داكن/تلقائي إلى أسفل الشريط الجانبي
- العرض في الرأس (Display in header) — يضيف أداة التبديل إلى رأس الموقع
بدون تمكين هذا الإعداد، لن يرى المستخدمون أداة تبديل وضع الألوان على الموقع وسيتبع الموقع تفضيل نظام كل مستخدم تلقائيًا.
الخيارات التي يراها المستخدم
تفضيلات المستخدم
يمكن للمستخدمين اختيار الوضع المفضل لديهم لعرض الموقع:
انتقل إلى تفضيلات المستخدم > الواجهة (User Preferences > Interface)
في قسم “لوحة الألوان (Color palette)”، يمكن للأعضاء تحديد لوحاتهم الفاتحة والداكنة المفضلة، بالإضافة إلى الوضع الذي يرغبون في استخدامه: فاتح (Light)، داكن (Dark)، تلقائي (Auto):
إذا تم اختيار “تلقائي (Auto)”، سيتكيف Discourse مع تفضيل مخطط ألوان نظام المستخدم.
أفضل الممارسات
- اتساق العلامة التجارية: قم بتخصيص اللوحات لتتناسب مع علامتك التجارية لكلا الوضعين. حافظ على ثبات الألوان الأساسية ولكن قم بالتعديل من أجل التباين وسهولة القراءة.
- إمكانية الوصول: تأكد من أن نسب تباين الألوان تفي بإرشادات WCAG (قد تساعدك هذه الأداة)، خاصة في الوضع الداكن، حيث قد تبدو بعض الألوان باهتة.
- الاختبار على أجهزة متعددة: تحقق من المظهر في كلا الوضعين، وعبر الأجهزة والمتصفحات.
- أصول الشعار: يمكنك تحميل شعارات منفصلة للوضع الفاتح والداكن في المسؤول > المظهر > شعار الموقع (
/admin/config/logo).- الحفاظ على عدد معقول من اللوحات: قدم فقط اللوحات التي يحتاجها المستخدمون أو التي تبدو معقولة.
الأسئلة الشائعة
هل يمكن أن يكون لدي أكثر من لوحة داكنة أو فاتحة واحدة؟
نعم، ولكن يوصى بالاحتفاظ بلوحة رئيسية واحدة لكل منهما لتقليل الارتباك. عيّن اللوحات الأساسية فقط للمظاهر ليختارها المستخدمون.هل يمكنني إجبار الجميع على استخدام الوضع الفاتح (أو الداكن) فقط؟
يمكنك القيام بذلك عن طريق تعيين نفس اللوحة كلوحات افتراضية فاتحة وداكنة، والتأكد من عدم إمكانية اختيار أي لوحات أخرى من قبل المستخدم.هل سيتم تعديل مكونات المظهر المخصصة للألوان تلقائيًا؟
إذا كانت تستخدم متغيرات ألوان CSS الخاصة بـ Discourse (مثل--primary،--secondary)، فستتوارث اللوحة. من الأفضل تجنب الألوان المكتوبة بترميز ثابت في CSS المخصص.هل يؤدي تبديل اللوحة إلى تغيير المظهر بأكمله، أم الألوان فقط؟
تتغير متغيرات الألوان فقط. يظل الهيكل والخطوط والتخطيط كما هي عند تغيير لوحات الألوان.موارد إضافية
4 إعجابات