Các màu phụ thuộc CSS color-lược đồ với Light-dark()

Màu hệ thống có thể phản ứng với giá trị color-scheme đang được sử dụng. Hàm light-dark() hiển thị chức năng tương tự cho các tác giả.

Bramus

Màu hệ thống trong CSS

Trong CSS, bạn có thể sử dụng nhiều màu từ một trong nhiều hệ màu. Ví dụ: bạn có thể dùng màu được đặt tên, màu hex, hàm màu liên kết với một hệ màu cụ thể, hàm color() chung chung hơn.

Ví dụ: màu được đặt tên cornflowerblue cũng có thể được biểu thị dưới dạng #6495ED, hsl(218.54deg 79.19% 66.08%) hoặc color(display-p3 0.43 0.58 0.9).

Ngoài các tên và định dạng nêu trên, CSS còn cung cấp các màu được mô tả là màu hệ thống, theo quy định trong Mô-đun màu CSS cấp 4. Những màu hệ thống này là màu do trình duyệt xác định và được thể hiện bằng một từ khoá.

Ví dụ: màu hệ thống Canvas – không được nhầm lẫn với phần tử <canvas> – thể hiện "nền của nội dung hoặc tài liệu ứng dụng". Hàm này kết hợp độc đáo với và cũng được dùng kết hợp với CanvasText, đại diện cho "văn bản trong nội dung hoặc tài liệu của ứng dụng".

Trong CSS, bạn sử dụng các lớp này như sau:

body {
  color: CanvasText;
  background-color: Canvas;
}

Theo mặc định, CanvasText cho ra màu gần với black, còn Canvas là màu gần với white. Việc triển khai thực tế phụ thuộc vào trình duyệt. Ví dụ: CanvasText trong Chrome dẫn đến #121212 trong khi Safari được chỉ định là #1e1e1e nhẹ hơn một chút.

Ưu điểm ẩn của những màu hệ thống này là có thể phản hồi giá trị đã tính toán của thuộc tính color-scheme. Ví dụ: giá trị của CanvasText và Canvas sẽ được đảo ngược khi color-scheme được sử dụng là dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

Trong bản minh hoạ sau đây, bạn có thể thay đổi giá trị của color-scheme được đặt trên :root và xem cách trang phản hồi.

• Khi được đặt thành light dark, phần tử này cho biết phần tử hỗ trợ cả chế độ sáng lẫn tối. Lựa chọn giá trị nào được sử dụng phụ thuộc vào giá trị của điều kiện đa phương tiện prefers-color-scheme.
• Khi bạn đặt thành light, thuộc tính này cho biết phần tử hỗ trợ bảng phối màu sáng.
• Khi bạn đặt thành dark, thuộc tính này cho biết phần tử hỗ trợ bảng phối màu tối.

Xin giới thiệu light-dark()

Cho đến nay, phản ứng với giá trị color-scheme đã qua sử dụng là điều dành riêng cho màu hệ thống. Nhờ có light-dark(), được chỉ định trong Mô-đun màu CSS cấp 5, giờ đây bạn cũng có chức năng tương tự.

light-dark() là một hàm chấp nhận hai đối số, cả hai đều phải là <color>. Một trong hai thuộc tính trên được chọn tuỳ thuộc vào bảng phối màu đã sử dụng.

• Nếu bảng phối màu được sử dụng là light hoặc không xác định, thì giá trị đã tính của giá trị đầu tiên sẽ được trả về.
• Nếu bảng phối màu được sử dụng là dark thì giá trị đã tính toán của màu thứ hai sẽ được trả về.

Kết quả của light-dark() là một <color>. Bạn có thể dùng mã này trong CSS ở những nơi chấp nhận <color>. Ví dụ: trong các thuộc tính color và background-color, nhưng cũng như trong một hàm như linear-gradient().

Trong ví dụ sau, màu nền được sử dụng là #333 ở chế độ tối hoặc #ccc ở chế độ sáng (hoặc chế độ không xác định).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Xin lưu ý rằng để light-dark() hoạt động chính xác, bạn cần chỉ định color-scheme. Vì thuộc tính đó kế thừa, nên bạn thường thiết lập thuộc tính trên :root. Tuy nhiên, nếu muốn, bạn có thể chọn thiết lập thuộc tính đó trên một phần tử cụ thể.

Ứng dụng thực tế

Trong ví dụ sau, một số thuộc tính tuỳ chỉnh biểu thị màu sắc trên trang. Để phục vụ cho chế độ tối, giá trị của các thuộc tính tuỳ chỉnh đó sẽ bị ghi đè bằng một giá trị khác trong điều kiện nội dung nghe nhìn prefers-color-scheme.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

Nhờ light-dark(), mã này có thể được đơn giản hoá. Vì color-scheme được thiết lập thành light dark trên :root, nên giá trị của các màu này sẽ tự động thay đổi khi bạn thay đổi hệ điều hành từ chế độ sáng sang chế độ tối và ngược lại.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Bên cạnh đó, bạn có thể buộc một cây con nhất định của DOM chỉ sử dụng chế độ sáng hoặc tối bằng cách đặt color-scheme thành dark hoặc light. Trong ví dụ sau, thuộc tính này được áp dụng cho :root.