ไม่ได้กำหนดสีธีมสำหรับแถบที่อยู่

การกำหนดธีมแถบที่อยู่ของเบราว์เซอร์ให้ตรงกับสีแบรนด์ของ Progressive Web App (PWA) มอบประสบการณ์ของผู้ใช้ที่สมจริงยิ่งขึ้น

ความเข้ากันได้กับเบราว์เซอร์

ตั้งแต่เดือนธันวาคม 2022 เป็นต้นไป เบราว์เซอร์ที่ใช้ Android, Google Chrome และ Microsoft Edge จะรองรับการกำหนดธีมในแถบที่อยู่ของเบราว์เซอร์ ดูข้อมูลอัปเดตได้ที่ความเข้ากันได้ของเบราว์เซอร์

วิธีที่การตรวจสอบสีธีม Lighthouse ไม่สำเร็จ

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 ของ Google

ขั้นตอนที่ 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)