<meta name="theme-color">

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Giá trị theme-color cho thuộc tính name của phần tử <meta> chỉ ra một màu được đề xuất mà các user agent nên sử dụng để tùy chỉnh hiển thị trang hoặc giao diện người dùng xung quanh. Nếu được chỉ định, bạn xác định màu chủ đề bằng cách sử dụng thuộc tính content trong phần tử <meta> dưới dạng giá trị CSS <color>.

Ví dụ, để chỉ ra rằng một tài liệu nên sử dụng cornflowerblue làm màu chủ đề, hãy đặt <meta> như sau:

html

<meta name="theme-color" content="cornflowerblue" />

Để đặt phương tiện mà siêu dữ liệu màu chủ đề áp dụng, hãy thêm thuộc tính media với một danh sách media query hợp lệ (xem ví dụ media query với theme-color).

Ghi chú sử dụng

Một phần tử <meta name="theme-color"> có các thuộc tính bổ sung sau:

content

Một phần tử <meta> với name=theme-color phải có thuộc tính content xác định màu chủ đề. Giá trị của thuộc tính content như sau:

Giá trị <color>: Một giá trị màu hợp lệ, chẳng hạn như thập lục phân, RGB, màu được đặt tên, v.v.

media Optional

Bất kỳ loại phương tiện hoặc truy vấn hợp lệ nào. Nếu được cung cấp, các tùy chọn cho màu chủ đề của tài liệu được xác định trong thuộc tính content được đề xuất với trình duyệt khi media query khớp.

Ví dụ

Đặt giá trị màu

Xem xét đoạn code sau sử dụng <meta> để đặt màu chủ đề:

html

<meta name="theme-color" content="#4285f4" />

Hình ảnh sau cho thấy hiệu ứng của cài đặt này trong Chrome trên thiết bị di động Android:

Hình ảnh cho thấy hiệu ứng của việc sử dụng theme-color

Nguồn ảnh: từ Icons & Browser Colors, được tạo và chia sẻ bởi Google và được sử dụng theo các điều khoản được mô tả trong Creative Commons 4.0 Attribution License.

Sử dụng media query với `theme-color`

Bạn có thể cung cấp loại phương tiện hoặc truy vấn bên trong thuộc tính media. theme-color sau đó sẽ chỉ được đặt nếu điều kiện phương tiện là đúng. Ví dụ:

html

<meta
  name="theme-color"
  content="cornflowerblue"
  media="(prefers-color-scheme: light)" />
<meta
  name="theme-color"
  content="dimgray"
  media="(prefers-color-scheme: dark)" />