كيفية تغيير لون CSS لسمة لوحة ألوان واحدة؟

[Nacho_Caballero]

لدي حاليًا سمة واحدة تحتوي على لوحتي ألوان (واحدة فاتحة وأخرى داكنة). أنا راضٍ بنسبة 90% عن لوحة الألوان الداكنة، لكنني أود في بعض الحالات إجراء بعض التعديلات.

على سبيل المثال، لا يوجد تباين كافٍ بين ألوان الخلفية وألوان المقدمة في رسائل الهمس ضمن لوحة الألوان الداكنة:

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

أعلم أنه يمكنني تجاوز تنسيقات CSS، لكن إذا قمت بتغييرها إلى var(--primary-light)، فسيؤثر ذلك أيضًا على لوحة الألوان الفاتحة.

هل توجد طريقة لاستهداف لوحة ألوان واحدة فقط، أم أن أفضل ممارسة هي إنشاء سمتين مختلفتين، كل منهما تحتوي على لوحة ألوان خاصة بها؟

مشكلتي مع هذا النهج الثاني هي أنني سأضطر إلى تكرار الكثير من التخصيصات الأخرى التي لا علاقة لها بالألوان.

[Johani (Joe)]

بالتأكيد، هناك دالتان في SCSS يمكنك استخدامهما للتحقق مما إذا كنت تستخدم لوحة ألوان فاتحة أو داكنة.

app/assets/stylesheets/common/foundation/variables.scss

تستخدمهما على النحو التالي.

@if is-light-color-scheme() {
  // CSS لـ لوحة ألوان فاتحة
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS لـ لوحة ألوان داكنة
  h1 {
    color: red;
  }
}

[Nacho_Caballero]

شكرًا لك على التنبيه، @Johani. يبدو أن الدالة dark-light-choose($light, $dark) تفعل بالضبط ما أريده، لكن مشكلتي الآن هي أنها لا تكتشف تغيير لوحة الألوان.

الموضوع النشط الوحيد لدي يُدعى “ناتشو” (Nacho)، ويحتوي على لوحتين: “كلارا” (Clara) للوضع الفاتح، و"أوسكورا" (Oscura) للوضع الداكن:

لقد قمت بتخصيصه باستخدام CSS التالي:

$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

هذا يعمل مع لوحة الألوان الفاتحة:

لكنه لا يعمل مع لوحة الألوان الداكنة:

إذا قمت بتغيير CSS إلى هذا، فإنه يعمل:

.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

إذًا يبدو أن تغيير لوحة الألوان الداكنة لا يتم اكتشافه. أستطيع أن أرى أن is-light-color-scheme تفحص سطوع $primary و $secondary. إليك لوحة الألوان الداكنة الخاصة بي:

واللوحة الفاتحة:

لقد نفدت من الأفكار.

[Nacho_Caballero]

تم إصلاح ذلك هنا: Why might dark-light-choose() not work? - #2 by awesomerobot