تحديث الثيمات والإضافات لدعم الوضع المظلم التلقائي

[Discourse]

في السابق، كانت جميع الألوان في Discourse مخزنة كمتغيرات SCSS. لدعم التبديل التلقائي لمخطط ألوان الوضع الداكن، قمنا بتحويل هذه الألوان في النواة إلى خصائص CSS مخصصة. يمكنك بسهولة رؤية القائمة الكاملة في المُفتِّش الآن:

تحتاج السمات (Themes) والإضافات (Plugins) إلى تبديل جميع متغيرات SCSS $color المستخدمة في أوراق الأنماط إلى ما يعادلها من خصائص CSS --color. في معظم الحالات، تكون هذه مهمة بحث واستبدال بسيطة:

-   background-color: $primary-very-low;
+   background-color: var(--primary-very-low);

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

في الإضافات (Plugins)

هذا الالتزام (commit) في إضافة discourse-encrypt هو مثال جيد وبسيط لمثل هذه إعادة الهيكلة. إنه ينقل تعريف mix($color1, $color2) الخاص بـ SCSS إلى ملف منفصل ويخزنه كخاصية CSS مخصصة. بعد ذلك، يتم تسجيل الملف الجديد كأصل :color_definitions مما يضمن تضمين خاصية اللون المُعلنة حديثًا في ورقة أنماط تعريفات الألوان.

في السمات (Themes)

في السمات، يمكنك القيام بالشيء نفسه عن طريق تعريف خصائص CSS المخصصة في ورقة الأنماط common/color_definitions.scss. يمكنك الاطلاع على هذا الالتزام في السمة graceful كمثال.

بعض الملاحظات الإضافية

• عند استخدام ألوان شفافة عبر الدالة rgba($color, 0.5)، يقبل SCSS ألوان HEX و RGB في المعامل الأول، بينما تقبل خصائص CSS المخصصة لون RGB فقط. لهذا السبب قدمنا الدالة المساعدة hexToRGB() وبعض الخصائص التي تنتهي باللاحقة --rgb في تعريفات الألوان. مثال:

// color_definitions.scss
:root {
  --primary: #{$primary};
  --primary-rgb: #{hexToRGB($primary)};
}

// other stylesheet
.element {
  background-color: rgba(var(--primary-rgb), 0.05);
}

• لاحظ أنه في المقتطف أعلاه، يتم استيفاء (interpolate) متغير SCSS عند تمريره إلى خاصية مخصصة. هذا مطلب في SCSS، راجع Sass: Property Declarations لمزيد من التفاصيل.
• يمكن لتعريف CSS var() أن يوفر قيمة احتياطية (fallback) إذا لم تكن القيمة الأولى متاحة، كما في كتابة var(--color1, red)، سيعود CSS إلى اللون الأحمر إذا لم يتم العثور على الخاصية --color1. في الإضافات، نستخدم متغيرات ألوان SCSS كقيم احتياطية لضمان التوافق مع الإصدارات السابقة من Discourse. لذا، سيبدو المثال السابق بهذا الشكل مع قيمة احتياطية:

-   background-color: $primary-very-low;
+   background-color: var(--primary-very-low, $primary-very-low);

---

يتم التحكم في إصدار هذا المستند - اقترح تغييرات على github.

[pfaffman (Jay Pfaffman)]

@pmusaraj

Themes and plugins need to switch all the $color SCSS variables used in stylesheets to the --color CSS property equivalents. I

I’m not very good at this stuff and it’ll take me a while to figure this out myself. . . Does this mean that all themes that referred to colors before are now going to be broken?

[pmusaraj (Penar Musaraj)]

No, not at all. SCSS variables in themes will continue to work for a long time.

But any colors outputted via SCSS variables will stay static, i.e. they cannot be dynamically switched to a new color scheme when a browser goes from normal to dark mode. So those themes/plugins will continue to work, they just won’t be compatible with automatic dark mode switching.

[tomtjes (Thomas Reintjes)]

شكرًا على التعليمات. هل توجد طريقة لتغيير صورة الخلفية أيضًا بناءً على الوضع الداكن/الفاتح؟ (لقد استخدمت مكون مفاتيح السمة للقيام بذلك). هل من الممكن استخدام فئة CSS تشير إلى الوضع؟

[pmusaraj (Penar Musaraj)]

سؤال رائع، جربت ذلك ولاحظت أننا لم نُدعم بشكل صحيح استخدام صور الخلفية أو متغيرات السمات في ملف تنسيقات الألوان الخاص. لذا قمت بإجراء بعض الإصلاحات في النواة، ويجب أن تتمكن من القيام بذلك الآن (تأكد من سحب أحدث إصدار من النواة).

لذلك، إذا كان لديك صورتان في سمة أو مكون السمة، مع متغيرات SCSS تُسمى $bg-light و $bg-dark على التوالي، يمكنك إضافة ما يلي إلى ملف color_definitions.scss:

$bg: url(dark-light-choose($bg-light, $bg-dark));

:root {
  --custom-bg: #{$bg};
}

ثم يمكنك استخدام var(--custom-bg) في ملف التنسيقات العادي.

[riking (Kane York)]

بالنسبة للصورة، كل ما عليك فعله هو استخدام استعلام وسائط CSS القياسي prefers-dark-theme.

[pmusaraj (Penar Musaraj)]

@riking

استعلام الوسائط CSS للموضوع المفضل: dark في Vanilla

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

[j127]

هل من الممكن لـ Discourse أيضًا إضافة فئة CSS إلى <body> لمخطط الألوان أو معرف مخطط الألوان؟ يبدو أن هذا سيكون أسهل بكثير.

أحاول حل مشكلة أثناء تحويل السمة حيث أحتاج إلى الكثير من قواعد CSS والمتغيرات المختلفة، وهي تتحول إلى فوضى معقدة في ملف color_definitions.scss.

إذا كان بإمكاني فقط القيام بشيء كهذا في ملف SCSS معزول في السمة، فسوف يستغرق الأمر 5 دقائق للقيام بشيء يستغرق وقتًا طويلاً لمعرفة كيفية التعامل معه باستخدام color_definitions.scss:

body.dark-palette .some-thing {
  // some styles
}

body.light-palette .some-thing {
  // some styles
}

[pmusaraj (Penar Musaraj)]

نعم، يمكن أن ينتهي بك الأمر بالعديد من أسطر التعليمات البرمجية في ملفات تعريف الألوان، خاصةً للتدرجات.

لا يزال هذا هو المكان الأنسب في ذهني. إنه بعيد عن العنصر الذي يتم استخدامه فيه، نعم، ولكنه مكان واحد مناسب يتعامل مع الألوان/التدرجات التي تتغير بناءً على الوضع الفاتح/الداكن.

البديل هو استخدام شيء مثل هذا:

@container style(--scheme-type: light){
  body{
    background: red;
  }
}

تأتي مخططات الألوان الخاصة بنا مع خاصية --scheme-type وهي light للمخططات الفاتحة و dark للمخططات الداكنة. تدعم المتصفحات الحديثة استعلامات الحاوية، لذا يجب أن يؤدي هذا إلى تحقيق ما تحاول إنجازه هنا دون إضافة فئة إلى جسم الصفحة.

[j127]

مهاراتي في CSS/SCSS ليست رائعة. ربما يكون هذا أسهل للأشخاص المتعمقين في هذه الأمور.

لقد كان يسبب فوضى في ملف color_definitions.scss، لذلك نقلته إلى ملف آخر في scss/ حتى أتمكن من استيراده. لست متأكدًا من كيفية تسمية كل شيء، لذا يبدو الأمر كالتالي:

أعتقد أنه سيكون من الأسهل القيام بذلك باستخدام فئة body (أو ربما بعض الأمثلة الأخرى)، ولكن في كل الأحوال، إنه يعمل في الوقت الحالي. لا أعرف كيف تعمل استعلامات الحاوية، لكنني سأبحث عنها لاحقًا.

[panic]

لاحظ أن استعلامات الأنماط للخصائص المخصصة لا تعمل على فايرفوكس اعتبارًا من اليوم (2025/11/14).