prefers-color-scheme

Phần tử nhúng

Đối với SVG và iframe, prefers-color-scheme cho phép bạn đặt kiểu CSS cho SVG hoặc iframe dựa trên color-scheme của phần tử cha trong trang web. Các SVG phải được dùng dưới dạng nhúng (tức là <img src="circle.svg" alt="circle" />) thay vì nhúng trực tiếp vào HTML. Ví dụ về việc dùng prefers-color-scheme trong SVG có thể tìm thấy trong phần "Kế thừa bảng màu trong các phần tử nhúng".

Việc sử dụng prefers-color-scheme được cho phép trong các phần tử <svg> và <iframe> cross-origin. Các phần tử cross-origin là các phần tử được lấy từ một máy chủ khác với trang đang tham chiếu chúng. Để tìm hiểu thêm về SVG, xem tài liệu SVG và để biết thêm thông tin về iframe, xem tài liệu iframe.

Cú pháp

light

Cho biết người dùng đã thông báo rằng họ thích giao diện có chủ đề sáng, hoặc chưa bày tỏ sở thích tích cực nào.

dark

Cho biết người dùng đã thông báo rằng họ thích giao diện có chủ đề tối.

Ví dụ

Phát hiện giao diện tối hay sáng

Cách dùng phổ biến là sử dụng bảng màu sáng theo mặc định, rồi dùng prefers-color-scheme: dark để ghi đè màu thành biến thể tối hơn. Cũng có thể làm ngược lại.

Ví dụ này thể hiện cả hai tùy chọn: Giao diện A sử dụng màu sáng, nhưng có thể được ghi đè thành màu tối. Giao diện B sử dụng màu tối, nhưng có thể được ghi đè thành màu sáng. Cuối cùng, nếu trình duyệt hỗ trợ prefers-color-scheme, cả hai giao diện sẽ là sáng hoặc tối.

HTML

<div class="box theme-a">Theme A (initial)</div>
<div class="box theme-a adaptive">Theme A (changed if dark preferred)</div>
<br />

<div class="box theme-b">Theme B (initial)</div>
<div class="box theme-b adaptive">Theme B (changed if light preferred)</div>

CSS

div.box {
  display: inline-block;
  padding: 1em;
  margin: 6px;
  outline: 2px solid black;
  width: 12em;
  height: 2em;
  vertical-align: middle;
}

Giao diện A (màu nâu) sử dụng bảng màu sáng theo mặc định, nhưng sẽ chuyển sang bảng màu tối dựa trên media query:

.theme-a {
  background: #ddccaa;
  color: #773311;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #775533;
    color: #ddccbb;
    outline: 5px dashed black;
  }
}

Giao diện B (màu xanh) sử dụng bảng màu tối theo mặc định, nhưng sẽ chuyển sang bảng màu sáng dựa trên media query:

.theme-b {
  background: #444477;
  color: #bbbbdd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bbccdd;
    color: #333344;
    outline: 5px dotted black;
  }
}

Kết quả

Các hộp bên trái hiển thị Giao diện A và Giao diện B như thể không có media query prefers-color-scheme. Các hộp bên phải hiển thị các giao diện tương tự, nhưng một trong số chúng sẽ được thay đổi thành biến thể tối hoặc sáng hơn dựa trên bảng màu đang hoạt động của người dùng. Đường viền của một hộp sẽ là nét đứt hoặc nét chấm nếu nó được thay đổi dựa trên cài đặt trình duyệt hoặc hệ điều hành của bạn.

Kế thừa bảng màu trong các phần tử nhúng

Ví dụ sau đây cho thấy cách dùng đặc trưng media prefers-color-scheme trong một phần tử nhúng để kế thừa bảng màu từ phần tử cha. Một script được dùng để đặt nguồn của các phần tử <img> và thuộc tính alt của chúng. Thông thường điều này được thực hiện trong HTML như <img src="circle.svg" alt="circle" />.

Bạn sẽ thấy ba vòng tròn, trong đó một cái được vẽ bằng màu khác. Vòng tròn đầu tiên kế thừa color-scheme từ hệ điều hành và có thể được chuyển đổi bằng công cụ chuyển chủ đề của hệ thống.

Vòng tròn thứ hai và thứ ba kế thừa color-scheme từ phần tử nhúng; truy vấn @media cho phép đặt kiểu cho nội dung SVG dựa trên color-scheme của phần tử cha. Trong trường hợp này, phần tử cha có thuộc tính CSS color-scheme là một <div>.

<div>
  <img alt="circle" src="" />
</div>
<div class="light">
  <img alt="circle" src="" />
</div>
<div class="dark">
  <img alt="circle" src="" />
</div>

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

// Embed an SVG for all <img> elements
for (const img of document.querySelectorAll("img")) {
  img.src = `data:image/svg+xml;base64,${window.btoa(`
    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
      <style>
        :root { color: blue }
        @media (prefers-color-scheme: dark) {
          :root { color: purple }
        }
      </style>
      <circle fill="currentColor" cx="16" cy="16" r="16"/>
    </svg>
  `)}`;
}

Thông số kỹ thuật

Khả năng tương thích với trình duyệt

Xem thêm

• Thuộc tính color-scheme
• <meta name="color-scheme">
• HTTP Header Sec-CH-Prefers-Color-Scheme User Agent Client Hint
• Mô phỏng prefers-color-scheme trong Firefox
• Video: Lập trình chế độ tối cho trang web của bạn
• Thiết kế lại sản phẩm và trang web của bạn cho chế độ tối
• Thay đổi bảng màu trên Windows, macOS, Android, hoặc các nền tảng khác.