منذ فترة طويلة، وأنا أواجه مشاكل مع أيقونات الرأس لدي. سمة الوضع المظلم لدي تحتوي على أيقونات رأس بيضاء، وسمة الوضع الفاتح لدي تحتوي على أيقونات رأس داكنة. حاولت مرة أخرى معرفة المشكلة، واطلعت على عدد من المواضيع.
ولكن بعد النظر إلى سمات الألوان الخاصة بي واللعب بها، وجدت أن مثيلي لا يبدو أنه يحتوي على هذا الإصلاح. هذا المنشور المرتبط يعود تاريخه إلى عام 2019، وأنا حاليًا على 3.4.0.beta1-dev.
يمكن لأدوات مطوري المتصفح المساعدة في الوصول إلى جوهر المشكلة من خلال إظهار الأنماط التي يتم تطبيقها. بالنسبة لـ 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>)، وقد يكون لون الخلفية قادمًا من أحد هذه العناصر.
