عدم ضبط لون المظهر لشريط العناوين

تخصيص شريط عناوين المتصفّح بحيث يتطابق مع ألوان العلامة التجارية تطبيق الويب التقدّمي (PWA) لتقديم تجربة أكثر تفاعلية للمستخدم.

توافُق المتصفح

اعتبارًا من كانون الأول (ديسمبر) 2022، أصبحت مظاهر شريط عناوين المتصفّح متاحة على المتصفحات المستندة إلى Android وGoogle Chrome وMicrosoft Edge عرض توافُق المتصفّح للحصول على التحديثات.

طريقة تعذُّر تدقيق ألوان مظهر Lighthouse

Lighthouse تضع علامة على الصفحات التي لا تطبّق مظهرًا على شريط العناوين:

تدقيق في Lighthouse يُظهر أنّ شريط العناوين غير مصمم حسب ألوان الصفحة

يتعذّر التدقيق إذا لم تعثر أداة Lighthouse على العلامة الوصفية theme-color في HTML والموقع الإلكتروني theme_color في بيان تطبيق الويب.

يُرجى العلم أنّ أداة Lighthouse لا تختبر ما إذا كانت القيم هي قيم ألوان CSS صالحة.

كيفية ضبط لون مظهر لشريط العناوين

الخطوة 1: إضافة العلامة الوصفية theme-color إلى كل صفحة تريد إضافة العلامة التجارية إليها

تضمن العلامة الوصفية theme-color تمييز شريط العناوين بعلامة تجارية في حال يزور أحد المستخدمين موقعك كصفحة ويب عادية. اضبط سمة content للعلامة على أي قيمة لون CSS صالحة:

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#317EFB"/>
  …
</head>
…

تعرّف على مزيد من المعلومات حول العلامة الوصفية theme-color في دعم theme-color في Chrome 39 لنظام Android.

الخطوة 2: إضافة السمة theme_color إلى بيان تطبيق الويب

تضمن السمة theme_color في بيان تطبيق الويب أنّ العنوان الشريط إلى العلامة التجارية عندما يشغّل المستخدم تطبيق الويب التقدّمي (PWA) من الشاشة الرئيسية. على عكس العلامة الوصفية theme-color، ستحتاج فقط إلى لتحديدها مرة واحدة، في البيان. اضبط السمة على أي قيمة لون CSS صالحة:

{
  "theme_color": "#317EFB"
  …
}
 ```

The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.

## Resources

- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)