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