الطريقة الصحيحة لتعديل CSS للوضع الفاتح والداكن

الدعم
1

أحتاج إلى تعديل الكثير من أكواد CSS للوضع الفاتح والداكن، وقد قرأت بعض المنشورات على المنتدى التي تقول إنه لا توجد طريقة موثوقة للقيام بذلك، بما في ذلك

ومع ذلك، فإن الكثير من هذه المنشورات قديمة. هل توجد طريقة سهلة في عام 2026؟ لقد جربت استخدام هذه الأكواد

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

ولكنني لست متأكداً مما إذا كان هذا صحيحاً، لكنه يعمل.

2

ستعمل استعلام الحاوية، ولكن للتبسيط يمكنك استخدام الدالة الأصلية light-dark() في CSS للقيام بذلك أيضًا:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}
```\nبشكل عام في Discourse نعتمد على متغيرات الألوان التي تتغير تلقائيًا لتجنب تعيين ألوان محددة بهذه الطريقة (`--primary`، `--secondary`، إلخ)... هذا يسمح للألوان بالعمل بغض النظر عن مخطط الألوان. 

يمكنك رؤية بعض الأمثلة هنا: https://meta.discourse.org/styleguide/atoms/colors وكيف تتغير عند التبديل إلى الوضع الداكن/الفاتح. يتم إعداد هذه المتغيرات بواسطة لوحات الألوان في `/admin/config/colors`
3

رائع، شكراً جزيلاً لكris. بالمناسبة، تلك الروابط لا تعمل