لماذا قد لا تعمل dark-light-choose()؟

الدعم
1

أحاول استخدام دالة dark-light-choose($light, $dark) في ملف CSS المخصص لدي، لكنها تُرجع دائمًا قيمة $light حتى عندما أغير لوحة الألوان من الفاتح (Clara) إلى الغامق (Oscura):

image
image1380×594 39 KB

أقدم تفاصيل أكثر حول إعداداتي هنا:

حتى الآن، قمت بمراجعة ما يلي:

  • أن اللون الأساسي في السمة الغامقة لدي له سطوع أعلى من اللون الثانوي.
  • أنني أستخدم وسيطات الدالة بالترتيب الصحيح.

لا أعرف كيف أكتشف المشكلة. هل قد تكون هذه مشكلة في سُمعتي؟ هل هناك متغير آخر يجب أن أضعه في الاعتبار؟

2

أعتقد أنه نظرًا لطريقة تجميع SCSS، يجب إضافة تعريفات الألوان المخصصة للوضع الداكن/الفاتح إلى color_definitions.scss داخل السمة، ولن تعمل في ملفات SCSS أخرى.

Screen Shot 2020-12-04 at 9.54.13 PM
Screen Shot 2020-12-04 at 9.54.13 PM936×138 14.1 KB

يُعد ملف color_definitions.scss عاليًا في التسلسل (قبل العديد من الأنماط الافتراضية)، لذا لا ترغب في إضافة جزء .modal.history-modal ins هناك. بدلاً من ذلك، يمكنك فقط إضافة تعريف اللون نفسه…

$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

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

ثم في ملف common أو أي من ملفات السمة الأخرى، يمكنك القيام بما يلي:

.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}
3

شكرًا جزيلاً لك، كريس. لقد أنقذتني! يعمل بشكل مثالي :tada:

لقد جربت استخدامه والشيء الوحيد الذي لا أفهمه هو سبب ضرورة استخدام الاستبدال المتغير مع قيم الألوان. على سبيل المثال، هذا لا يعمل بدون استبدال متغير:

$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

لكن هذا يعمل:

$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

كلا الإصدارين يعملان إذا تم تعيين $ins إلى متغير (على سبيل المثال: $ins: $dark-theme-ins ).

ما الذي أفتقده؟

4

هذا شرط في SCSS عند استخدام خصائص CSS المخصصة. مزيد من التفاصيل هنا: Sass: Property Declarations