نسخة ذات سمة داكنة ترث السمة الفاتحة + تتجاوز أجزاء؟

الدعم
1

في البداية، كنتُ راضيًا عن مخطط لون واحد فاتح وآخر داكن مُعرّف ضمن سمة واحدة. لكنني أود تعديل بعض أنماط CSS بشكل خاص عند استخدام مخطط الألوان الداكن.

هل توجد طريقة لإعداد سمة داكنة كنوع من السمات الفرعية، بحيث ترث جميع أنماط السمة الأصلية (الفاتحة)، ولكنها تمتلك مخطط ألوان خاص بها وتتكون فقط من تجاوزات للسمة الأصلية؟

أم شيء مشابه؟

2

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

3

أقوم بتحرير هذا المنشور لعكس ما تعلمته دفعة واحدة، بدلاً من ملل القراء بسرد العملية:

مثال على CSS أريد تباينه بين الوضع الفاتح والوضع الداكن:

الوضع الفاتح:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

الوضع الداكن:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

لقد رجعت إلى منشور @pmusaraj هنا، وبعد بعض التجارب، قمت بالآتي:

في ملف common/color_definitions.scss، عرّفت متغيرات لتمثل لون الخلفية ولون الخط لـ .nav-pills. وضعي الداكن لا يحدد لون خط، ووضع الفاتح لا يحدد لون خلفية، لكن يجب علي تحديد شيء ما ليعمل dark-light-choose()، لذا استخدمت متغيرات نواة Discourse ($primary و $quaternary-low على التوالي):

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

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

ثم الكود ذي الصلة في common.scss:


// كود SCSS شامل للوضع الداكن والفاتح:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

يعمل بنجاح!

4

يجب أن يكون هذا common/color_definitions.scss.

وفي common.css، تكون القيم البديلة هي نفسها القيمة الأولية، لذا يمكنك ببساطة استخدام:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}
5

أوه، شكرًا لك، قمت بتعديل منشوري لتصحيح ذلك.

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