كيف تجعل ل favicon قابلة للتكيف مع dark theme

مقدمة:

من بين الأشياء اللي لابد أي موقع إلكتروني تكون عندو, هي ل favicon لأنها أساسية باش إبان الموقع إحترافي. الطريقة المعروفة هي أنك تستعمل أيقونة من نوع ico. في <link> داخل ل <head> , على هذا الشكل :

<head>
     <link rel="icon" href="/favicon.ico" >
</head>

مؤخرا, المتصفحات ولاو كايدعمو ل svg, يعني انه بإمكانك تستعمل في ل favicon ايقونة من نوع svg. من المعروف أن أيقونات ل svg كاتكون صغيرة في الوزن و أيضا يمكنها أن تغير الحجم دون ضعف الجودة بالإضافة أنه بإمكانك توضع فالداخل ديالها css.

فهاد المقال غانشفو كيفاش نجعلو ل favicon قادرة على التكيف مع Theme اللي كيختارو المستخدم (Dark mode - Light mode).

adaptive favicon

favicon الخاصة بموقع Darija.dev مقادة بإستعمال تطبيق Figma.

الأن باش نقولو للموقع يستخدم في ل favicon أيقونة svg كانوضعوها بهاد الشكل :

<head>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

لكن خاصنا نوضعو في الحسبان المتصفحات اللي مكادعمش ل favicon من نوع svg, لذلك غانستعملو الانواع بجوج ico. و svg. , لكن خاص ل svg. تكون قبل ل ico. بهاد الشكل :

<head>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
     <link rel="icon" href="/favicon.ico">
</head>

الطريقة 1:

الأن غانشوفو الطريقة الاولى لجعل أيقونة svg قابلة للتكيف مع Theme الخاص بالمستخدم. أولا نشوفو ل code الخاص بالأيقونة المستعملة للشرح.

<svg width="131" height="88" viewBox="0 0 131 88" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path id="brackets" d="M3.47092 55.6394L28.8549 39.4842L33.2029 45.9289L11.106 59.7365L32.2146 74.232L27.2591 80.7036L1.63585 62.2982L3.47092 55.6394ZM118.885 63.422L97.7763 48.9265L102.732 42.4549L128.355 60.8603L126.52 67.5191L101.136 83.6743L96.788 77.2296L118.885 63.422Z" fill="#A3A2A2"/>
  <path id="d" d="M48.4613 78.107C46.7203 77.6879 45.7011 76.0938 45.4037 73.3245C44.922 68.6499 44.7724 63.7003 44.9548 58.4756C45.261 49.7082 46.282 41.5031 48.0179 33.8605C48.4407 32.0121 49.3766 30.8625 50.8255 30.4115L56.2383 29.3106C62.0485 28.1162 67.6494 27.2727 73.041 26.7802L73.8095 4.77218L86.3435 2.8989L85.8014 27.6558L83.3564 65.3522L71.9928 66.0303L72.5269 38.4247C68.1856 38.5955 64.0933 39.3304 60.2501 40.6294C58.9886 46.9988 58.2847 52.2769 58.1385 56.4638C57.9298 62.44 57.9324 66.4708 58.1462 68.5564C62.5781 69.8935 67.8752 71.0817 74.0373 72.121C80.2353 73.1615 84.4904 73.9192 86.8027 74.394L83.0716 85.8186C69.2631 83.1508 60.7425 81.4201 57.5097 80.6265C54.3128 79.8341 51.2966 78.9943 48.4613 78.107Z" fill="black"/>
</svg>

ل svg مصنوعة بإستخدام markup language بحال ل html إسمها XML.

كيف ما كاتشوفو عندي 2 path كل واحد فيهم عطيتو id مختالف, لأن الأول اللي عندو "id="brackets هو المسؤول عن رسم هاد الشكل <> و الثاني اللي عطيتو "id="d هو المسؤول عن رسم حرف d.

كيف ما قلت لكم سابقا , ل svg كاتقبل نكتبو وسط منها css, لذلك غانستخدموه باش نغيرو الالوان ديالها. باش نعرفو Theme اللي ختارو المستخدم, غانستاعنو بي ل Media Queries و بالضبط ب prefers-color-scheme اللي كاتحمل إسم Theme المستعمل, واش dark اولا light.

بالنسبة للي مكايعرفش ل `Media Queries`:

هي مجموعة من الادوات اللي كاتمكنا من أننا نفدو style محدد حسب شرط ما, كحجم الشاشة أو نوعية العرض أو في هذه الحالة Theme المستخدم.

حنا الهدف ديالنا هو نبدلو الألوان ديال ل svg ملي يتغير Theme إلى dark. لذلك غانقولو ل css يغير الألوان ملي يتحقق الشرط اللي بغينا.

<style>
  @media (prefers-color-scheme:dark) {
        #brackets {
          fill: #ccc;
        }

        #d{
            fill: white;
        }
    }
</style>

كيف ما كاتشوفو, غانغيرو اللون ديال d إلى اللون الأبيض, و اللون ديال <> لهاد اللون #ccc اللي هو عبارة عن رمادي فاتح. النتيجة غاتكون على هاد الشكل:

<svg width="131" height="88" viewBox="0 0 131 88" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path id="brackets" d="M3.47092 55.6394L28.8549 39.4842L33.2029 45.9289L11.106 59.7365L32.2146 74.232L27.2591 80.7036L1.63585 62.2982L3.47092 55.6394ZM118.885 63.422L97.7763 48.9265L102.732 42.4549L128.355 60.8603L126.52 67.5191L101.136 83.6743L96.788 77.2296L118.885 63.422Z" fill="#A3A2A2"/>
  <path id="d" d="M48.4613 78.107C46.7203 77.6879 45.7011 76.0938 45.4037 73.3245C44.922 68.6499 44.7724 63.7003 44.9548 58.4756C45.261 49.7082 46.282 41.5031 48.0179 33.8605C48.4407 32.0121 49.3766 30.8625 50.8255 30.4115L56.2383 29.3106C62.0485 28.1162 67.6494 27.2727 73.041 26.7802L73.8095 4.77218L86.3435 2.8989L85.8014 27.6558L83.3564 65.3522L71.9928 66.0303L72.5269 38.4247C68.1856 38.5955 64.0933 39.3304 60.2501 40.6294C58.9886 46.9988 58.2847 52.2769 58.1385 56.4638C57.9298 62.44 57.9324 66.4708 58.1462 68.5564C62.5781 69.8935 67.8752 71.0817 74.0373 72.121C80.2353 73.1615 84.4904 73.9192 86.8027 74.394L83.0716 85.8186C69.2631 83.1508 60.7425 81.4201 57.5097 80.6265C54.3128 79.8341 51.2966 78.9943 48.4613 78.107Z" fill="black"/>
  <style>
    @media (prefers-color-scheme:dark) {
        #brackets {
          fill: #ccc;
        }

        #d{
            fill: white;
        }
     }
  </style>
</svg>

الطريقة 2:

في الطريقة الأولى ستعملنا css, الأن في الطريقة الثانية غانستخدمو Javascript.

أولا خاص إكونو عندك 2 أيقونات, واحدة مخصصة ل dark theme و الأخرى ل light theme. ثم غانستخدمو الخاصة ب light theme, بالإضافة لأننا غانعطيو ل <link> شي id اللي غايمكنا من اننا نحددوها من خلال javascript.

<head>
     <link rel="icon" href="/light.svg" type="image/svg+xml" id="faviconTag">
</head>

في javascript غانستاعنو بي window.matchMedia باش نوصلو ل Theme و غانقومو بمتابعة التغير بإستخدام addEventListener و الحدث او ل event غايكون هو change . ثم نغيرو الايقونة المستخدمة حسب تغير Theme. ل code غايكون على الشكل التالي:

const faviconTag = document.getElementById("faviconTag");
const isDark = window.matchMedia("(prefers-color-scheme: dark)");

const changeFavicon = () => {
   if (isDark.matches) {
       faviconTag.href = "./dark.svg";
   }else{
       faviconTag.href = "./light.svg";
   }
 };

isDark.addEventListener('change', changeFavicon);

الفرق بين الطريقة الأولى و الثانية هي أنه في الطريقة الأولى, إلى تغير Theme خاص المستخدم يدير تحديث للصفحة باش إشوف التغير. أما فالطريقة الثانية javascript كايقوم بتغيير ل favicon بدون الحاجة إلى تحديث الصفحة. الطريقة الثانية هي الطريقة المستخدمة في موقع github.

github favicon example

النهاية