Chrome đã giới thiệu khái niệm về màu giao diện cho trang web của bạn vào năm 2014. Màu giao diện là gợi ý từ trang web của bạn để cho trình duyệt biết màu nào cần phủ màu các thành phần trên giao diện người dùng như thanh địa chỉ.
Ví dụ: bên dưới là trang web này khi áp dụng và không áp dụng màu giao diện.
Vấn đề là bạn phải xác định màu giao diện trên mỗi trang và nếu bạn có trang web lớn hoặc trang web cũ thì việc thực hiện nhiều thay đổi trên toàn trang web không phải lúc nào cũng khả thi.
Kể từ Chrome 46 (bản thử nghiệm tháng 9 năm 2015), việc thêm thuộc tính theme_color vào tệp kê khai sẽ tự động áp dụng màu cho mọi trang mà người dùng truy cập trên miền của bạn khi trang web chạy từ màn hình chính.
Nếu trang của bạn đã có thẻ meta màu giao diện — ví dụ: <meta name="theme-color" content="#2196F3"> —
thì cấu hình cấp trang sẽ được sử dụng thay cho giá trị trong tệp kê khai.
Bạn chỉ cần thêm thuộc tính theme_color vào tệp kê khai và chỉ định màu HTML.
"theme_color": "#2196F3"
Để xem ví dụ thực tế về điều này, hãy truy cập Airhorner — chiếc kèn trompet tốt nhất thế giới rồi thêm vào màn hình chính. Hoặc xem tệp kê khai của trang web.
Câu hỏi thường gặp
- Nếu trang web của tôi không mở trên màn hình chính thì có phải như vậy không?
Có. - Liệu sự kiện này có áp dụng cho toàn bộ trang web của tôi hay không, chẳng hạn như khi người dùng chỉ duyệt xem trang web?
Hiện tại, điều đó có nghĩa là trình duyệt sẽ phải tải tệp kê khai xuống thường xuyên hơn rất nhiều và hiện tại là tài sản có mức độ ưu tiên thấp. Thông tin này sẽ được phân tích cú pháp khi người dùng thêm trang web vào màn hình chính.