Trang này được dịch bởi Cloud Translation API.

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 (không được nhầm lẫn với phần tử <canvas>) đại diện cho "nền tảng 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à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 cho kết quả #121212 trong khi Safari cho trình duyệt này chỉ định #1e1e1e nhẹ hơn một chút.

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.

Một trang cho phép bạn thay đổi giá trị cho color-scheme. Khi thay đổi, màu của trang sẽ thay đổi khi chuyển từ sáng sang tối hoặc ngược lại, mặc dù các 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()`

Hỗ trợ trình duyệt

Nguồn

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 CSS Color Module Level 5 (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 đã 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 đã sử dụng là dark thì giá trị đã tính của màu thứ hai sẽ được trả về.

Kết quả của light-dark() là <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 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;
  }
}

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 nội dung nghe nhìn.

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);
}

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

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, điều 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().
Bằng cách sử dụng một trong các tuỳ chọn, bạn có thể buộc chế độ sáng hoặc tối. Bạn có thể thực hiện việc này bằng cách thao tác với giá trị color-scheme.

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

Màu hệ thống trong CSS

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

Ứng dụng thực tế

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