تخصيص شريط عناوين المتصفّح بحيث يتطابق مع ألوان العلامة التجارية تطبيق الويب التقدّمي (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 في
دعم 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)