يمكن لأدوات مطوري المتصفح المساعدة في الوصول إلى جوهر المشكلة من خلال إظهار الأنماط التي يتم تطبيقها. بالنسبة لـ Chrome/Firefox، يمكنك النقر بزر الماوس الأيمن على أحد أيقونات الرأس واختيار “Inspect”.
ابحث عن جزء الأنماط (styles pane)، الذي يعرض كل كود CSS الذي يؤثر على العنصر. يجب أن يتم التحكم في لون الأيقونة نفسها بواسطة خاصية color. يبدو أن لديك أيضًا background-color مضبوطة على “primary”.
على اليمين، يعرض اسم ملف المصدر لكل كتلة من تنسيق CSS. العديد منها من Discourse الأساسي (على سبيل المثال، “header.scss” من لقطة الشاشة). إذا كان يقول شيئًا مثل “theme_6.scss”، فمن المحتمل أنه من السمة (theme) الخاصة بك أو مكون سمة نشط آخر. يمكنك النقر فوق اسم الملف لعرضه ومعرفة مكان هذا الكود في الملف (أو الرجوع إلى رقم السطر الموجود على يمين اسم الملف).
أخيرًا، يمكنك تبديل الخصائص وتشغيلها وإيقافها في لوحة الأنماط لمعرفة كيف ستبدو إذا تمت إزالتها (مرر فوق خاصية لرؤية مربع اختيار). يتم سردها من الأعلى أولوية إلى الأدنى، لذا بشكل عام فإن تلك الموجودة في الأعلى ستتجاوز أي شيء أدناه. على سبيل المثال، في لقطة الشاشة يمكنك رؤية أن color: var(--primary-low-mid) من “buttons.scss” تم تجاوزها (يشار إليها بشطبها).
إذا لم تر شيئًا واضحًا، يمكنك محاولة تحديد العناصر الأصل في علامة تبويب العناصر (Elements tab) للبحث عن التنسيق هناك. في هذه الحالة، أيقونة SVG موجودة داخل عنصر رابط (<a>)، والذي بدوره موجود داخل عنصر عنصر قائمة (<li>)، وقد يكون لون الخلفية قادمًا من أحد هذه العناصر.
بمجرد العثور على كود CSS المسبب للمشكلة في السمة الخاصة بك، يجب أن تكون قادرًا على إزالته بأمان للعودة إلى المظهر الافتراضي!