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

مطور
1

أحاول معرفة كيفية تعيين لون عنصر بناءً على نظام الألوان المحدد. يعمل ما يلي بشكل جيد مع الوضع الفاتح الخاص بي، ولكنه لا يعمل بشكل جيد مع الوضع المظلم.

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

أفضل أن يكون لدي ما يلي للوضع المظلم فقط.

color: var(--secondary-low)

هذا يعمل بشكل جيد مع الوضع المظلم، ولكن ليس مع الوضع الفاتح. هل هناك أي طريقة لتعديل قيمة color: بناءً على نظام الألوان المحدد؟

2

أهلاً،

هناك عدة طرق للقيام بذلك.

على سبيل المثال:

يمكنك تغيير ألوان مخطط الألوان على admin/customize/colors/. فقط حدد مخطط الألوان الخاص بالوضع المظلم لديك وقم بتغيير رمز اللون secondary.

ملاحظة: سيؤدي هذا إلى تغيير اللون الثانوي في كل مكان وليس فقط على أيقونات الرأس.

أو يمكنك استخدام الوسائط prefers-color-scheme لتغيير secondary إلى secondary-low في الوضع المظلم.

شيء مثل هذا:

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

أو يمكنك إنشاء تعريفات ألوان مخصصة: Why might dark-light-choose() not work? - #2 by awesomerobot

آمل أن يساعد هذا :slightly_smiling_face:

إعجابَين (2)
3

شكرًا على التوجيه.

يبدو أن هذا هو بالضبط ما أود فعله (تغيير أيقونات الرأس فقط، وليس كل العناصر التي لها اللون --secondary). سؤال أخير… يعمل هذا إذا تم تعيين السمة كسمة الوضع المظلم وتم تنشيط الوضع المظلم بواسطة نظام التشغيل، ولكن ليس إذا تم اختيار سمة الوضع المظلم كسمة “عادية”. أي اقتراحات حول ذلك؟

إعجاب واحد (1)
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);
}
إعجابَين (2)
5

لقد نجح هذا الأمر بشكل رائع! شكرًا لك!

إعجابَين (2)
6

شيء واحد أخير … هل سيعمل هذا إذا قمت بتضمين color_definitions.scss في السمة الخاصة بي بدلاً من استخدام مكون سمة؟

إعجاب واحد (1)
7

بالتأكيد، هذا سيعمل أيضًا. :slightly_smiling_face:

إعجاب واحد (1)
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.