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 hiện được sử dụng. Hàm light-dark() cung cấp chức năng tương tự cho tác giả.

Bramus

Màu hệ thống trong CSS

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

Ví dụ: màu có 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 khác nhau này, CSS còn bao gồm các màu được mô tả là màu hệ thống, được chỉ định trong CSS Color Module Level 4 (Mô-đun màu CSS cấp 4). Màu hệ thống là màu do trình duyệt xác định và được biểu thị bằng một từ khoá.

Ví dụ: màu hệ thống Canvas (đừng nhầm lẫn với phần tử <canvas>) đại diện cho "nền của nội dung hoặc tài liệu ứng dụng". Thuộc tính này kết hợp tốt và cũng được dùng cùng 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 biến này như sau:

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

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

Một sức mạnh tiềm ẩn của các màu hệ thống này là chúng có thể phản hồi giá trị được tính toán của thuộc tính color-scheme. Ví dụ: các giá trị cho CanvasText và Canvas sẽ được lật 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, 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, giá trị này cho biết phần tử hỗ trợ cả chế độ sáng và chế độ tối. Việc lựa chọn giá trị nào được sử dụng phụ thuộc vào giá trị của prefers-color-scheme điều kiện nội dung nghe nhìn.
  • Khi được đặ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 được đặ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.
Trang cho phép bạn thay đổi giá trị của color-scheme. Khi thay đổi, màu sắc của trang sẽ thay đổi khi chuyển từ sáng sang tối hoặc ngược lại, mặc dù nội dung khai báo trên phần tử nội dung vẫn giữ nguyên.

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

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

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

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 màu sẽ được chọn tuỳ thuộc vào bảng phối màu được 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ị được tính toán 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ị được tính toán của màu thứ hai sẽ được trả về.

Kết quả của light-dark() là <color>. Bạn có thể sử dụng hàm này trong CSS ở bất cứ nơi nào chấp nhận <color>. Ví dụ: trong các thuộc tính color và background-color, 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 một 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 một color-scheme. Vì thuộc tính đó kế thừa, nên bạn thường đặt thuộc tính đó trên :root nhưng nếu muốn, bạn có thể chọn đặt thuộc tính đó trên một phần tử cụ thể.

Áp dụng thực tế

Trong ví dụ sau, một vài thuộc tính tuỳ chỉnh đại diện cho màu sắc trên trang. Để phù hợp với 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;
  }
}
Một trang phản hồi chế độ sáng hoặc tối thông qua prefers-color-scheme.
Các giá trị màu được thay đổi trong CSS bằng cách sử dụng truy vấn phương tiện.

Nhờ có light-dark(), mã này có thể được đơn giản hoá. Vì color-scheme được đặt 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 chuyển 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);
}
Một trang phản hồi chế độ sáng hoặc tối bằng cách sử dụng prefers-color-scheme.
Các giá trị màu được thay đổi bằng cách sử dụng light-dark().

Ngoài ra, 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 chế độ 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.

Một trang phản hồi chế độ sáng hoặc tối bằng prefers-color-scheme.
Các giá trị màu được thay đổi bằng light-dark().
Khi sử dụng một trong các tuỳ chọn, bạn có thể buộc sử dụng chế độ sáng hoặc tối. Bạn có thể thực hiện việc này bằng cách điều chỉnh giá trị color-scheme.