ما هي أسهل طريقة لإنشاء سمة فاتحة باستخدام سمة داكنة ذات تخصيص كبير

[hipp0]

أنا أستخدم سمة Foundation مع لوحة ألوان داكنة قمت بتخصيصها بشكل كبير باستخدام CSS.

أتساءل ما هي أسهل طريقة لإنشاء نسخة فاتحة تتبع جميع قواعد CSS نفسها.

[Moin]

يمكنك إضافة لوحة ألوان فاتحة إلى السمة الخاصة بك

يمكنك تحديث الألوان بناءً على ما إذا تم استخدام السمة الفاتحة أو الداكنة:

@awesomerobot

لذا في color_definitions.scss يمكنك القيام بما يلي:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

ثم ستستخدم خاصية CSS المخصصة الجديدة التي تتغير بين الداكن والفاتح في السمة الخاصة بك:

body {
  color: var(--my-theme-color);
}

[hipp0]

حسنًا، أحتاج إلى تعديل كل تغيير باستخدام الوضع الداكن أو الفاتح (أنا أستخدم الوضع الداكن/الفاتح الافتراضي)

[Moin]

يعتمد الأمر على ذلك. تحتاج إلى القيام بذلك فقط إذا كنت تستخدم ألوانًا ثابتة. طالما أنك تشير إلى الألوان مثل var(--primary-300) أو var(--danger)، فإنها تتغير تلقائيًا بناءً على لوحة الألوان.