Natcha Luang - Aroonchai

Trust me I'm Petdo

Bangkok, Thailand

[Howto] วิธีเปลี่ยนสีแท็บ Chrome บน Android

หลังจากที่ Chrome ประกาศสนับสนุน theme-color ตั้งแต่เวอร์ชัน 39 เป็นต้นไปผมเองก็ยังไม่ได้สนใจมากนัก แต่เผอิญที่วันนี้ระหว่างนั่งกินข้าวเช้าก็เปิดอ่านเว็บตามปกติ แล้วดันเจอกับข่าวของ Golang 1.6 ที่กำลังจะออกมาเร็ว ๆ นี้ (ตอนนี้ RC2 แล้ว) แล้วพบว่า tab ของหน้าเว็บมันเป็นสีน้ำเงินแบบเดียวกับ theme ของเว็บแล้วรู้สึกว่าสวยดี เลยลองนั่งเปิดเว็บดัง ๆ อีกหลายเว็บก็พบว่าเริ่มมีการใส่สีแบบนี้กันเยอะแล้ว ผมเองก็เลยต้องจัดบ้าง

จะว่าไปจริง ๆ แล้วมันก็คงมีคนใส่มาตั้งแต่แรก ๆ อยู่แล้วแต่ผมเพิ่งจะได้มาสังเกตเห็นมากกว่า แต่อย่างน้อยก็เอามาเขียนบอกไว้เผื่อใครกำลังมองหาวิธีเพิ่มลูกเล่นให้กับเว็บไซต์ของตัวเองอยู่

มาดูตัวอย่างจากเว็บ reddit จะเห็นว่าตรงแท็บที่ปกติควรจะเป็นสีขาวนั้นกลายเป็นสีน้ำเงิน

reddit

หลัก ๆ แล้วสิ่งที่เราต้องเพิ่มคือการใส่แท็ก <meta> สำหรับระบุค่าสีที่เราต้องการเข้าไปนั่นเอง ตัวอย่างแท็กก็มีดังนี้

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#00848B">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#00848B">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#00848B">

ซึ่งวิธีการก็ง่าย ๆ แค่เอาแท็ก <meta> ทั้งสามอันนี้ไปใส่ไว้ก่อนปิด </header> จากนั้นก็เปลี่ยนค่าสีตรง content="#00848B" ให้เป็นค่าสีที่เราต้องการเท่านั้นเอง

อย่าลืมไปลองทำกันดูน่ะครับ


อ้างอิง

Comments