تعريفات الألوان لأنظمة ألوان تتجاوز الفاتح والداكن

الدعم
1

مرحباً، أود أن أعرف كيفية تحديد تعريفات الألوان لأكثر من مخطط ألوان واحد، مثل الفاتح والداكن والخافت، على غرار ما تفعله تويتر.

مشكلتي الحالية:
أنا حاليًا قادر على تنسيق الألوان الافتراضية الفاتحة والداكنة غير المدرجة مثل primary-low في مكون سمة مخصص ولكني غير مدرك لكيفية إضافة وضع الألوان المخصص هذا إلى مخطط ألوان مختلف.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins};

}
2

مرحبًا :waving_hand:

يمكن لـ Discourse التعامل مع مخططين للألوان: الفاتح والداكن. لذلك، عند تبديل جهازك إلى الوضع الداكن، سيستخدم مخطط ألوان الوضع الداكن الافتراضي default dark mode color scheme id كإعداد افتراضي.

يمكنك إضافة المزيد من لوحات الألوان المخصصة إلى Discourse.

يمكنك تعيين لوحات ألوان جديدة في صفحة /admin/customize/colors.

أو

على سبيل المثال، إذا كنت تستخدم سمة مخصصة، فيمكنك تعيين هذه في ملف about.json.
مثلما نفعل في سمة FKB Pro على سبيل المثال.

في هذه الحالة، سيتم إضافة هذه لوحات الألوان إلى /admin/customize/colors.

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

لقطة شاشة 2024-01-06 في 9.43.56|512x134، 75%
لقطة شاشة 2024-01-06 في 9.43.56|512x134، 75%512×134 4.66 KB

dark-light-choose()

يمكن للدالة dark-light-choose() التعامل فقط مع مخططي الألوان الفاتح/الداكن، وليس مع لوحة الألوان. لذا أقترح استخدامها فقط لإنشاء متغيرات ألوان مخصصة، وليس لتجاوز المتغيرات الافتراضية. لتجاوز متغيرات الألوان الافتراضية، يمكنك فعل ما أظهرته أعلاه.

إذا قام المستخدم بتعيين لوحة ألوان مختلفة عن الإعداد الافتراضي للموقع (فاتح/داكن) في صفحة تفضيلات المستخدم، فسيتم استخدام متغير اللون الذي أنشأته باستخدام dark-light-choose() لجميع لوحات الألوان الفاتحة أو الداكنة لمخططات الألوان.

هذا هو أحد الأسباب التي دفعتني لإنشاء مكون السمة التالي Customization > Theme component.

في مكون السمة هذا، يمكنك استهداف color-scheme="id"s بشكل منفصل.

لذا ما يمكنك فعله هو :arrow_down_small:

إنشاء لوحات ألوان (فاتح، خافت، داكن)

استخدام المكون أعلاه لإجراء تعديلات على ألوان color-scheme="id" الخافتة أو أي أشياء أخرى، إذا لزم الأمر.