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

الدعم
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);
  }
}

يعمل بنجاح!