أعتقد أن هذا قد يكون صعبًا باستخدام Horizon[1]، لكن شيءًا مثل هذا سيعمل في مكون السمة. سيختلف اللون حسب المتغير الذي تستخدمه (مثل: --tertiary-low من لوحات الألوان للوضع الفاتح/الداكن). يمكنك أيضًا إنشاء متغيرات خاصة بك وإضافة المزيد من التعقيد.
في ملف CSS المخصص لمكون السمة:
@use "lib/viewport";
//** استهداف معرف الفئة لفئة محددة **//
.category-box[data-category-id="4"] {
// ** التطبيق فقط على الأجهزة المحمولة ** //
@include viewport.until(md) {
.category-box-inner {
background: var(--tertiary-low);
}
}
}
مع لوحة الألوان المستخدمة حاليًا على موقعك:
الوضع الفاتح:
الوضع الداكن:
أجد أن تخصيص Horizon أمر مزعج ↩︎