استخدام أيقونات SVG في وثائق المساعدة لتكون متوافقة بصريًا مع الوضع المظلم

عام
1

بعد تمكين التبديل التلقائي للوضع المظلم، لاحظت أن العديد من لقطات الشاشة الخاصة بي التي تشرح أزرار واجهة المستخدم الفردية تبدو فظيعة بخلفياتها البيضاء. حاولت إعادة استخدام كود SVG الذي تستخدمه الواجهة الفعلية ولكنه لم ينجح. وجدت:

ولكن استخدام ملفات SVG التي تم تنزيلها مباشرة من Font Awesome لم ينجح أيضًا، ورابط GitHub للأيقونات من تلك المحادثة لم يكن مطابقًا تمامًا لواجهة Discourse الحالية. لحسن الحظ، عثرت على:

هذا ساعدني على إدراك أنه نعم، العرض والارتفاع مفقودان من تنزيلات Font Awesome. وجدت أيقونات v5 في Font Awesome وقمت بتعديل ملفات SVG تلك. كان ارتفاع 17 بكسل يعمل بشكل جيد لأزرار إجراءات المشاركة (14 بكسل لأزرار المحرر) وأي عرض منطقي لكل إعداد viewBox؛ وكان حاسب نسبة العرض إلى الارتفاع مفيدًا في بعض الأحيان.

بالإضافة إلى الحاجة إلى إضافة width و height، احتجت أيضًا إلى إضافة fill إلى المسار. اخترت استخدام fill="currentColor" بدلاً من لون ثابت لأنني اعتبرت لون النص المحيط به افتراضيًا ممتازًا. ومع ذلك، كنت لا أزال أرغب في أن تتطابق الأيقونات مع ألوان أزرار الواجهة وليست لون النص المحيط، ووجدت أنه يمكنني الاحتفاظ بصيغة تحميل الملف ![alt](file) وما زلت أستهدف ملفات SVG المحددة هذه عن طريق لفها في عنصر span بتنسيق HTML (شيء لن يفعله المستخدمون العاديون على الأرجح) وإضافة

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%);
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

إلى CSS. يقوم CSS المحدد هذا بمحاكاة var(--primary-low-mid) عندما يتم تعيين اللون الأساسي إلى الأسود في مخطط الألوان الفاتح لدينا و #eee في مخطط الألوان الداكن لدينا، ويتعامل أيضًا مع عنصر span التفافي موجود بالفعل في لوحة معاينة المحرر. يمكنك استخدام مولد مرشحات CSS لمعرفة كيفية تغيير لون SVG عند استخدامه بهذه الطريقة. (اعتمادًا على مخططات الألوان الخاصة بك، قد ترغب في التحقق مرة أخرى من كيف يبدو الأمر إذا لم يكن لدى المستخدم خيار التبديل التلقائي للوضع المظلم محفوظًا في تفضيلاته ولكنه لا يزال لديه جهازه في الوضع المظلم، حيث توجد حالة بينية يمكن أن تحدث عند استخدام @media (prefers-color-scheme: dark) في CSS الخاص بك.)

نأمل أن تساعد عملية الاكتشاف هذه شخصًا آخر! إذا كنت ترغب في تنزيل وإعادة استخدام/تعديل الأيقونات التي صنعتها لهذا الغرض (لأن هذا استغرق وقتًا طويلاً)، يمكنك الحصول عليها من صفحات الدروس التعليمية التي أكملتها حتى الآن: إجراءات المشاركة وردود الفعل، تنسيق المشاركات الأساسي، تنسيق المشاركات المتقدم، و منشئ الاستطلاعات. (لقد استبدلت الأيقونات الفردية فقط واحتفظت بلقطات الشاشة لمخطط الألوان الفاتح للصور السياقية، وهي مزيج من الصور المأخوذة من مستندات المساعدة هنا في meta ولقطات الشاشة التي صنعتها لموقعنا المحدد.)

7 إعجابات