การใช้ไฟล์ Manifest ของเว็บแอปเพื่อระบุสีธีมแบบทั่วทั้งไซต์

Chrome ได้แนะนำแนวคิดเรื่องสีธีมสำหรับเว็บไซต์ของคุณในปี 2014 สีธีม เป็นคำแนะนำจากหน้าเว็บของคุณซึ่งจะบอกเบราว์เซอร์ว่าควรย้อมสีอะไร องค์ประกอบของ UI เช่น แถบที่อยู่

ตัวอย่างเช่น ด้านล่างคือเว็บไซต์นี้มีการใช้และไม่ได้ใช้สีธีม

สีธีม
สีธีม

ปัญหาคือคุณต้องกำหนดสีของธีมในทุกๆ หน้า และหากคุณมีเว็บไซต์ขนาดใหญ่หรือเว็บไซต์แบบเดิม การเปลี่ยนแปลงทั่วเว็บไซต์หลายครั้งก็ไม่สามารถทำได้เสมอไป

ตั้งแต่ Chrome 46 (เบต้าในเดือนกันยายน 2015) การเพิ่มแอตทริบิวต์ theme_color ลงในไฟล์ Manifest จะมีผลจากการใช้สีโดยอัตโนมัติกับทุกหน้าที่ผู้ใช้เข้าชมในโดเมนของคุณเมื่อมีการเปิดตัวเว็บไซต์จากหน้าจอหลัก

หากหน้าเว็บของคุณมีเมตาแท็กสีธีมอยู่แล้ว เช่น <meta name="theme-color" content="#2196F3"> ระบบจะใช้การกำหนดค่าระดับหน้าเว็บแทนค่าในไฟล์ Manifest

เพียงเพิ่มแอตทริบิวต์ theme_color ลงในไฟล์ Manifest และระบุสี HTML

    "theme_color": "#2196F3"

หากต้องการดูการใช้งานจริง ให้ไปที่ Airhorner สุดยอด Airhorn ของโลก แล้วเพิ่มลงในหน้าจอหลักของคุณ หรือดูไฟล์ Manifest ของเว็บไซต์

คำถามที่พบบ่อย

  • จะเกิดอะไรขึ้นหากเว็บไซต์ไม่ได้เปิดจากหน้าจอหลัก
    ได้
  • การเปลี่ยนแปลงนี้จะมีผลกับทั้งเว็บไซต์หรือไม่ เช่น ขณะที่ผู้ใช้เพียงแค่ท่องเว็บ
    ในขณะนี้ การทำเช่นนั้นจะทำให้เบราว์เซอร์ต้องดาวน์โหลดไฟล์ Manifest บ่อยขึ้นมากและปัจจุบันเป็นชิ้นงานที่มีลำดับความสำคัญต่ำ ซึ่งมีจุดประสงค์เพื่อแยกวิเคราะห์ เมื่อผู้ใช้เพิ่มเว็บไซต์ลงในหน้าจอหลัก