หน้านี้ได้รับการแปลโดย Cloud Translation API

สีที่ขึ้นอยู่กับรูปแบบสีของ CSS และสีอ่อน (light-dark())

สีของระบบจะตอบสนองต่อค่า color-scheme ที่ใช้อยู่ในปัจจุบัน ฟังก์ชัน light-dark() จะแสดงความสามารถเดียวกันนี้ต่อผู้แต่ง

Bramus

สีของระบบใน CSS

ใน CSS คุณใช้สีได้หลายสีจากพื้นที่สีหลายแห่ง เช่น คุณสามารถใช้สีที่มีชื่อ สีฐาน 16 ฟังก์ชันสีที่ลิงก์กับพื้นที่สีที่เฉพาะเจาะจง หรือฟังก์ชัน color() ทั่วไปมากขึ้น

เช่น สีที่มีชื่อ cornflowerblue สามารถแสดงเป็น #6495ED หรือ hsl(218.54deg 79.19% 66.08%) หรือ color(display-p3 0.43 0.58 0.9) ก็ได้

นอกจากชื่อและรูปแบบต่างๆ เหล่านี้แล้ว CSS ยังมีสีที่อธิบายว่าเป็นสีของระบบ ซึ่งระบุไว้ในข้อบังคับระดับ 4 เกี่ยวกับสีของ CSS สีของระบบเหล่านี้คือสีที่เบราว์เซอร์กำหนดไว้และแสดงด้วยคีย์เวิร์ด

เช่น สีของระบบ Canvas (โปรดอย่าสับสนกับองค์ประกอบ <canvas>) แสดงถึง "พื้นหลังของเนื้อหาหรือเอกสารแอปพลิเคชัน" รายการนี้ใช้ร่วมกับ CanvasText ซึ่งแสดงถึง "ข้อความในเนื้อหาหรือเอกสารแอปพลิเคชัน" ได้เป็นอย่างดีและควรใช้ร่วมกัน

ใน CSS คุณจะใช้เครื่องหมายดังกล่าวได้ดังนี้

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

โดยค่าเริ่มต้น CanvasText จะให้สีที่ใกล้เคียงกับ black และ Canvas จะให้สีที่ใกล้เคียงกับ white การใช้งานจริงจะขึ้นอยู่กับเบราว์เซอร์ เช่น CanvasText ใน Chrome จะแสดงเป็น #121212 ส่วน Safari จะกำหนดเป็น #1e1e1e ซึ่งอ่อนกว่าเล็กน้อย

ความสามารถที่ซ่อนอยู่ของสีของระบบเหล่านี้คือสามารถตอบสนองต่อค่าที่คำนวณแล้วของพร็อพเพอร์ตี้ color-scheme เช่น ค่าของ CanvasText และ Canvas จะสลับกันเมื่อ color-scheme ที่ใช้คือ dark

:root {
  color-scheme: dark;
}

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

ในการแสดงตัวอย่างต่อไปนี้ คุณสามารถเปลี่ยนค่าของ color-scheme ที่กําหนดใน :root และดูว่าหน้าเว็บตอบสนองอย่างไร

เมื่อตั้งค่าเป็น light dark แสดงว่าองค์ประกอบรองรับทั้งโหมดสว่างและโหมดมืด การเลือกค่าที่จะใช้ขึ้นอยู่กับค่าของprefers-color-scheme media condition
เมื่อตั้งค่าเป็น light แสดงว่าองค์ประกอบรองรับชุดค่าผสมสีอ่อน
เมื่อตั้งค่าเป็น dark แสดงว่าองค์ประกอบรองรับรูปแบบสีเข้ม

หน้าเว็บที่ให้คุณเปลี่ยนค่าของ color-scheme เมื่อเปลี่ยนแล้ว สีของหน้าเว็บจะเปลี่ยนจากสว่างเป็นมืดหรือในทางกลับกัน แม้ว่าการประกาศในองค์ประกอบ body จะยังคงเหมือนเดิม

ขอแนะนำ `light-dark()`

การรองรับเบราว์เซอร์

แหล่งที่มา

ก่อนหน้านี้ การตอบสนองต่อค่า color-scheme ที่ใช้นั้นสงวนไว้สำหรับสีของระบบ light-dark() ที่ระบุไว้ใน CSS Color Module Level 5 ช่วยให้ตอนนี้คุณมีความสามารถเดียวกันนี้ด้วย

light-dark() เป็นฟังก์ชันที่รับอาร์กิวเมนต์ 2 รายการ โดยทั้ง 2 รายการต้องเป็น <color> ระบบจะเลือกสีใดสีหนึ่งตามรูปแบบสีที่ใช้

หากรูปแบบสีที่ใช้คือ light หรือไม่ทราบ ระบบจะแสดงผลค่าที่คำนวณแล้วของค่าแรก
หากรูปแบบสีที่ใช้คือ dark ระบบจะแสดงผลค่าที่คำนวณแล้วของสีที่ 2

ผลลัพธ์ของ light-dark() คือ <color> สามารถใช้ใน CSS ได้ทุกที่ที่รับ <color> เช่น ในพร็อพเพอร์ตี้ color และ background-color รวมถึงในฟังก์ชันอย่าง linear-gradient()

ในตัวอย่างต่อไปนี้ background-color ที่ใช้คือ #333 ในโหมดมืด หรือ #ccc ในโหมดสว่าง (หรือโหมดที่ไม่รู้จัก)

:root {
  color-scheme: light dark;
}

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

โปรดทราบว่าคุณต้องระบุ color-scheme เพื่อให้ light-dark() ทํางานได้อย่างถูกต้อง เนื่องจากพร็อพเพอร์ตี้นั้นรับค่ามาโดยค่าเริ่มต้น คุณจึงมักจะตั้งค่าใน :root แต่หากต้องการ คุณก็เลือกตั้งค่าในองค์ประกอบที่เฉพาะเจาะจงได้

การใช้งานจริง

ในตัวอย่างต่อไปนี้ พร็อพเพอร์ตี้ที่กําหนดเอง 2-3 รายการแสดงสีในหน้า ระบบจะเขียนทับค่าของพร็อพเพอร์ตี้ที่กำหนดเองเหล่านั้นด้วยค่าอื่นใน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;
  }
}

หน้าเว็บที่ตอบสนองต่อโหมดสว่างหรือโหมดมืดผ่าน prefers-color-scheme
ค่าสีจะเปลี่ยนใน CSS โดยใช้คิวรีสื่อ

ขอขอบคุณ light-dark() ที่ทำให้โค้ดนี้ง่ายขึ้น เนื่องจากมีการตั้งค่า color-scheme เป็น light dark ใน :root ค่าของสีเหล่านี้จึงเปลี่ยนแปลงโดยอัตโนมัติเมื่อเปลี่ยนระบบปฏิบัติการจากโหมดสว่างเป็นโหมดมืดและในทางกลับกัน

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

หน้าเว็บที่ตอบสนองต่อโหมดสว่างหรือโหมดมืดโดยใช้ prefers-color-scheme
ค่าสีจะเปลี่ยนโดยใช้ light-dark()

นอกจากนี้ คุณยังบังคับให้ซับต้นไม้บางรายการของ DOM ใช้เฉพาะโหมดสว่างหรือโหมดมืดได้ด้วยโดยการตั้งค่า color-scheme เป็น dark หรือ light ในตัวอย่างนี้ เงื่อนไขจะมีผลกับ :root

หน้าเว็บที่ตอบสนองต่อโหมดสว่างหรือโหมดมืดโดยใช้ prefers-color-scheme
ค่าสีจะเปลี่ยนโดยใช้ light-dark()
การใช้ตัวเลือกใดตัวเลือกหนึ่งจะทำให้คุณบังคับใช้โหมดสว่างหรือโหมดมืดได้ ซึ่งทำได้ด้วยการจัดการค่า color-scheme

สีที่ขึ้นอยู่กับรูปแบบสีของ CSS และสีอ่อน (light-dark())

สีของระบบใน CSS

ขอแนะนำ light-dark()

การใช้งานจริง

ขอแนะนำ `light-dark()`