أهلاً!
حسب فهمي حتى الآن، يتم تطبيق أي تغيير في CSS على كل من الوضع الفاتح والوضع الداكن، وهذا لا يبدو منطقيًا.
مؤخرًا، اضطررت للتعامل مع هذه المشكلة: في الوضع الداكن، يبدو النص الملتف بنفس لون الغلاف، وإذا قمت بتغييره عبر CSS، سيتغير النص الملتف في السمة الفاتحة أيضًا، ولكنني لا أريد ذلك.
كيف يمكنني تغيير CSS لمخطط ألوان واحد فقط؟
إذا كنت تستخدم متغيرات الألوان (على سبيل المثال: var(--primary-very-low), var(--secondary-low)) المتوفرة في دليل الأنماط الخاص بمنتدى /styleguide/atoms/colors، فيجب أن تحترم الأوضاع الداكنة والفاتحة المتغيرات المختلفة (يمكنك أيضًا رؤيتها في لوحتي الألوان اللتين تستخدمهما للتبديل بين الوضع الداكن والفاتح). ستحتاج إلى تمكين إعداد styleguide enabled في إعدادات المسؤول، وهناك أيضًا إعداد styleguide admin only الذي يحدده للمسؤولين فقط.
المشكلة هي أنني أجريت تغييرات لم تحترم متغير اللون المحدد في دليل الأنماط (لم أتمكن من الوصول إليه عبر /styleguide/atoms/colors، على الرغم من ذلك). هل هناك طريقة للقيام بذلك دون اتباع المتغيرات؟
إذا فهمت المشكلة جيدًا، فهناك شيء محدد يجب القيام به لهذا.
لقد كنت أعمل على دليل حول هذا الأمر، ولكني أواجه بعض الصعوبة في دمج المعلومات بحيث تكون واضحة بما يكفي لاستخدام المعلومات مباشرة في سمة، ولكنها لا تزال تشرح الأمور التقنية الأساسية.
لشرح كيفية القيام بذلك بأكبر قدر ممكن من الوضوح…
أقترح عليك إنشاء سمة محليًا (باستخدام Install the Discourse Theme CLI console app to help you build themes سيساعدك).
ثم، قم بإنشاء ملف common/color_definitions.scss في السمة الخاصة بك، والذي تكتب فيه:
$my-color: dark-light-choose(#FC3468, #FF93AC);
:root {
--my-color: #{$my-color};
}
ثم، في common/common.scss، يمكنك استخدام المتغير هكذا:
h1 {
color: var(--my-color);
}
سيقوم تلقائيًا باختيار اللون الصحيح عند تشغيله في الوضع الداكن أو الفاتح.