يؤدي تخصيص شريط عناوين المتصفّح لمطابقة ألوان العلامة التجارية في تطبيق الويب التقدّمي (PWA) إلى توفير تجربة مستخدم أكثر شمولية.
توافُق المتصفح
اعتبارًا من كانون الأول (ديسمبر) 2022، أصبح استخدام شريط عناوين المتصفّح متاحًا على المتصفّحات المستندة إلى Android وGoogle Chrome وMicrosoft Edge. للحصول على التحديثات، يمكنك الاطّلاع على توافُق المتصفّح.
كيفية تعذُّر تدقيق ألوان مظهر 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 في دعم Google لـ 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)