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() cũng 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 từ một trong nhiều không gian màu. Ví dụ: bạn có thể sử dụng màu được đặt tên, màu hex, hàm màu liên kết với một không gian màu cụ thể, hàm color() 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ày, CSS còn bao gồm các màu được mô tả là màu hệ thống, được chỉ định trong Mô-đun màu CSS cấp 4. Các màu hệ thống này 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 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". Lớp này kết hợp tốt 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 ứng dụng hoặc tài liệu".

Trong CSS, bạn sử dụng các thuộc tính này như sau:

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

Theo mặc định, CanvasText sẽ cho ra một màu gần với black và Canvas là một 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 kết quả là #121212, trong khi Safari sẽ cho ra kết quả là #1e1e1e hơi sáng hơn.

Một sức mạnh ẩ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ẽ bị đả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, 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, thuộc tính này cho biết phần tử hỗ trợ cả chế độ sáng và 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 tình trạng nội dung nghe nhìn prefers-color-scheme.
• 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, giá trị 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, việc phản ứng với giá trị color-scheme đã sử dụng là một điều dành riêng cho màu hệ thống. Nhờ light-dark(), được chỉ định trong Mô-đun màu CSS cấp 5, giờ đây, bạn cũng có khả 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 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 thuộc tính 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, nhưng cũng 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 đặ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ể.

Ứng dụng thực tế

Trong ví dụ sau, một số thuộc tính tuỳ chỉnh đại diện cho màu sắc trên trang. Để phục vụ chế độ tối, các 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 đặt thành light dark trên :root, nên các 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);
}

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 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.