ঠিকানা বারের জন্য থিমের রঙ সেট করে না

আপনার প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) এর ব্র্যান্ডের রঙের সাথে মেলে ব্রাউজারের অ্যাড্রেস বারকে থিম করা আরও নিমগ্ন ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।

ব্রাউজার সামঞ্জস্য

ডিসেম্বর 2022 পর্যন্ত, ব্রাউজার অ্যাড্রেস বার থিমিং অ্যান্ড্রয়েড-ভিত্তিক ব্রাউজার, Google Chrome এবং Microsoft Edge-এ সমর্থিত। আপডেটের জন্য ব্রাউজার সামঞ্জস্য দেখুন।

কিভাবে Lighthouse থিম রঙ নিরীক্ষা ব্যর্থ হয়

Lighthouse পতাকা পৃষ্ঠাগুলি যে ঠিকানা বারে একটি থিম প্রয়োগ করে না:

ঠিকানা বার দেখানো বাতিঘর অডিট পৃষ্ঠার রঙের থিমযুক্ত নয়

অডিট ব্যর্থ হয় যদি Lighthouse পৃষ্ঠার HTML-এ একটি theme-color মেটা ট্যাগ এবং ওয়েব অ্যাপ ম্যানিফেস্টে একটি theme_color বৈশিষ্ট্য খুঁজে না পায়।

মনে রাখবেন যে Lighthouse মানগুলি বৈধ CSS রঙের মান কিনা তা পরীক্ষা করে না।

অ্যাড্রেস বারের জন্য থিমের রঙ কীভাবে সেট করবেন

ধাপ 1: আপনি ব্র্যান্ড করতে চান এমন প্রতিটি পৃষ্ঠায় একটি theme-color মেটা ট্যাগ যোগ করুন

theme-color মেটা ট্যাগ নিশ্চিত করে যে অ্যাড্রেস বারটি ব্র্যান্ড করা হয়েছে যখন কোনো ব্যবহারকারী আপনার সাইটে একটি সাধারণ ওয়েবপেজ হিসেবে ভিজিট করে। যেকোন বৈধ CSS রঙের মানতে ট্যাগের content বৈশিষ্ট্য সেট করুন:

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#317EFB"/>
  …
</head>
…

Android এর জন্য Chrome 39-এ theme-color জন্য Google-এর সমর্থনে theme-color মেটা ট্যাগ সম্পর্কে আরও জানুন।

ধাপ 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)