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à một gợi ý từ trang web của bạn, cho trình duyệt biết màu sắc cần phủ lên các thành phần trên giao diện người dùng, chẳng hạn như thanh địa chỉ.
Ví dụ: dưới đây 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 từng trang và nếu bạn có một 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ẽ giúp 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 khởi chạy trang web 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 vì 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 cách hoạt động của tính năng này, hãy truy cập vào Airhorner — còi hơi tốt nhất thế giới và thêm ứng dụng này 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
- Điều này có áp dụng nếu trang web của tôi không được khởi chạy từ màn hình chính không?
Có. - Có khi nào chính sách này áp dụng cho toàn bộ trang web của tôi, chẳng hạn như khi người dùng chỉ duyệt xem không?
Tại thời điểm này, để làm điều đó, 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à thành phần có mức độ ưu tiên thấp. Mã này đượ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.