رنگ تم برای نوار آدرس تعیین نمی کند

قالب بندی نوار آدرس مرورگر برای مطابقت با رنگ های برند برنامه وب پیشرو شما (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)