عنصر CSS بناءً على مخطط الألوان المحدد

مطور
4

أوه نعم، هذا لن يعمل بهذه الطريقة إذا كان مخطط الألوان الداكن قابلًا للتحديد.

أعتقد أن أفضل خيار يمكنك القيام به هو إنشاء تعريف لون مخصص لهذا الغرض، ويمكنك استخدام متغير اللون هذا لأيقونات الرأس.

قم بإنشاء مكون سمة وأضف ما يلي إلى علامة التبويب تعريفات الألوان

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

اضبط رمز اللون secondary-low على $dark-theme-header-icons ورمز اللون secondary على $light-theme-header-icons

$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;

$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);

:root {
  --custom-header-icons: #{$header-icons};
}

بعد ذلك، يمكنك استخدام متغير اللون --custom-header-icons هذا للون أيقونات الرأس.

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}