كيفية قلب الألوان باستخدام CSS

كيفية قلب ألوان العناصر والصور باستخدام CSS

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

نوع من السوء.

لذلك أضفت هذه القاعدة إلى CSS لاكتشاف الوضع المظلم وعكس لون الصورة تلقائيًا:

@media (prefers-color-scheme: dark) {
  .my-image {
    filter: invert(100%);
  }
}

إنها ليست دقيقة بنسبة 100٪ في حالتي ، لأن لون الخلفية الداكنة ليس أسود تمامًا ، لكنه أفضل من لا شيء.

لجعل الأمور مثالية ، يمكنك أيضًا إضافة الصورة باستخدام صورة خلفية CSS بدلاً من ملفimgفي HTML ، ويمكنني بسهولة تبديل ذلك في الوضع المظلم.

تحميل مجانيكتيب CSS


المزيد من دروس css: