تغییر رنگ نوار آدرس گوگل کروم در اندروئید

متا تگ theme-color به توسعه‌دهندگان اجازه می‌دهد تا رابط کاربری مرورگر - مانند نوار آدرس یا نوار تب - را با مشخص کردن یک رنگ متناسب با برند، سفارشی کنند. این پیشرفت کوچک اما تأثیرگذار، با ایجاد یکپارچگی دیداری بین وب‌سایت و رابط کاربری مرورگر، تقویت هویت برند و ارائه حسی جذاب‌تر، تجربه کاربری (UX) را بهبود می‌بخشد. برای مثال، سایتی که از تم آبی پررنگ استفاده می‌کند، می‌تواند آن رنگ را به مرورگر کروم هم معرفی کند تا بخش‌های حاشیه‌ای مرورگر هم تغییر رنگ سازگار با قالب سایت داشته باشند.

پشتیبانی مرورگرها از این ویژگی متفاوت است. کروم، اج و اپرا در اندروید از رنگ تم پشتیبانی می‌کنند و همزمان با مرور کاربران، رابط کاربری را به صورت پویا به‌روزرسانی می‌کنند. سافاری در iOS تا حدی از طریق متا تگ apple-mobile-web-app-status-bar-style برای برنامه‌های وب مستقل از آن پشتیبانی می‌کند. سایر مرورگرها از جمله فایرفاکس فعلا از این ویژگی پشتیبانی نمی‌کنند. با وجود پشتیبانی جزئی، پیاده‌سازی رنگ تم کار ساده‌ای است و می‌توانید با فعال کردن آن، در مرورگرهایی که از آن پشتیبانی می‌کنند، تجربه‌ی بهتری برای بازدیدکنندگان سایت ایجاد کنید.

نوار آدرس مرورگر در حالت پیش‌فرض به رنگ خاکستری دیده می‌شود و اگر این رنگ با طرح سایت شما همخوانی ندارد، می‌توانید با استفاده از قطعه کد زیر رنگ پیش‌فرض را تغییر دهید.

قطعه کد بالا می‌بایست در بخش head سایت قرار گیرد. رنگ مورد نظر برای نوار آدرس را در بخش content و با فرمت hex جایگزین نمایید.

پشتیبانی از media

این متاتگ از media هم پشتیبانی می‌کند و بسته به سلایق کاربر از جمله اینکه حالت شب فعال باشد یا نه و موارد دیگری مثل علاقه به تم رنگ تیره یا روشن، رنگ theme-color را تغییر دهید:

اضافه کردن کد در وردپرس

اگر می‌خواهید این کار را در قالب وردپرس خود انجام دهید، بخش head معمولا در فایل header.php واقع شده است و می‌توانید برای رسیدن به هدف، این فایل را یافته و ویرایش نمایید.

اطلاعات بیشتر

برای بررسی پشتیبانی دقیق و جزئیات پیاده‌سازی این متاتگ می‌توانید این صفحه را ببینید.