light-dark()

Cú pháp

/* Giá trị màu có tên */
color: light-dark(black, white);

/* Giá trị màu RGB */
color: light-dark(rgb(0 0 0), rgb(255 255 255));

/* Thuộc tính tùy chỉnh */
color: light-dark(var(--light), var(--dark));

Giá trị

Ký hiệu hàm: light-dark(light-color, dark-color)

light-color

Giá trị <color> được đặt cho color-scheme sáng.

dark-color

Giá trị <color> được đặt cho color-scheme tối.

Cú pháp chính thức

<light-dark()> = 
  <light-dark-color>  |
  <light-dark-image>  

<light-dark-color> = 
  light-dark( <color> , <color> )  

<light-dark-image> = 
  light-dark( [ <image> | none ] , [ <image> | none ] )  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Ví dụ

Đặt màu dựa trên bố cục màu

Theo mặc định, trong các trình duyệt hỗ trợ, màu trả về bởi hàm màu light-dark() phụ thuộc vào tùy chọn người dùng được đặt thông qua cài đặt hệ điều hành (ví dụ: chế độ sáng hoặc tối) hoặc từ cài đặt user agent. Bạn cũng có thể thay đổi cài đặt này trong developer tools của trình duyệt.

HTML

Chúng ta bao gồm ba phần để có thể nhắm mục tiêu màu sáng, màu tối và màu được chọn dựa trên tùy chọn bố cục màu của người dùng.

<h1><code>light-dark()</code> CSS function</h1>
<section>
  <h2>Automatic</h2>
  <p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
  <h2>Light</h2>
  <p>
    This section will be light due to the <code>color-scheme: light;</code>.
  </p>
</section>
<section class="dark">
  <h2>Dark</h2>
  <p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>

CSS

Chúng ta bao gồm màu cho cả chủ đề sáng và tối. Chúng ta cũng định nghĩa color-scheme cho tài liệu trên :root để bật hàm màu light-dark() cho toàn bộ tài liệu.

:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;

  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}

Ngoài việc bật hàm light-dark(), thuộc tính color-scheme còn cho phép ghi đè bố cục màu của người dùng cho các phần của tài liệu. Việc buộc một phần trang chỉ sử dụng bố cục màu sáng hoặc tối có thể được thực hiện bằng cách đặt thuộc tính color-scheme thành light hoặc dark.

.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

section {
  padding: 0.8rem;
}

Kết quả

Đặc tả kỹ thuật

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

Xem thêm

• color-scheme
• <color>
• Mô-đun CSS colors
• Tính năng prefers-contrast @media
• contrast()
• WCAG: color contrast
• Thuộc tính tùy chỉnh CSS và var()