กำหนดธีมแถบที่อยู่ของเบราว์เซอร์ให้เข้ากับสีของแบรนด์ ของ Progressive Web App (PWA) จะมอบประสบการณ์ของผู้ใช้ที่สมจริงยิ่งขึ้น
ความเข้ากันได้กับเบราว์เซอร์
ตั้งแต่เดือนธันวาคม 2022 เป็นต้นไป ระบบรองรับการกำหนดธีมแถบที่อยู่ของเบราว์เซอร์ใน เบราว์เซอร์ที่ใช้ Android, Google Chrome และ Microsoft Edge โปรดดู ความเข้ากันได้กับเบราว์เซอร์
วิธีที่การตรวจสอบสีธีมของ Lighthouse ล้มเหลว
Lighthouse ทำเครื่องหมายหน้าเว็บที่ไม่ได้ใช้ธีมกับแถบที่อยู่ ดังนี้
การตรวจสอบจะไม่สำเร็จหาก Lighthouse ไม่พบเมตาแท็ก theme-color ในหน้าเว็บ
HTML และพร็อพเพอร์ตี้ theme_color ในไฟล์ Manifest ของเว็บแอป
โปรดทราบว่า 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
ขั้นตอนที่ 2: เพิ่มพร็อพเพอร์ตี้ theme_color ลงในไฟล์ Manifest ของเว็บแอป
พร็อพเพอร์ตี้ theme_color ในไฟล์ Manifest ของเว็บแอปช่วยให้แน่ใจว่าที่อยู่
จะมีการแสดงแบรนด์เมื่อผู้ใช้เปิด PWA จากหน้าจอหลัก
สิ่งที่แตกต่างจากเมตาแท็ก theme-color คุณเพียงต้องใช้
เพื่อกำหนดสิ่งนี้เพียงครั้งเดียวในไฟล์ Manifest
ตั้งค่าคุณสมบัติเป็นค่าสี 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)