قالب بندی نوار آدرس مرورگر برای مطابقت با رنگ های برند برنامه وب پیشرو شما (PWA) تجربه کاربری همه جانبه تری را ارائه می دهد.
سازگاری مرورگر
از دسامبر 2022، نوار آدرس مرورگر قالب‌بندی در مرورگرهای مبتنی بر Android، Google Chrome و Microsoft Edge پشتیبانی می‌شود. برای به روز رسانی به سازگاری مرورگر مراجعه کنید.
چگونه ممیزی رنگ تم فانوس دریایی شکست می خورد
فانوس دریایی صفحاتی را که موضوعی را در نوار آدرس اعمال نمی کنند، پرچم گذاری می کند:
اگر 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's Support for theme-color در Chrome 39 for 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)