สีของระบบสามารถตอบสนองต่อค่า color-scheme
ที่ใช้ในปัจจุบันได้ ฟังก์ชัน light-dark()
ทำให้ผู้เขียนมีความสามารถแบบเดียวกัน
สีของระบบใน CSS
ใน CSS คุณสามารถใช้สีได้หลายสีจากพื้นที่สีที่มีจำนวนมาก เช่น คุณสามารถใช้สีที่มีชื่อ, สีแบบเลขฐาน 16, ฟังก์ชันสีที่ลิงก์กับพื้นที่สีเฉพาะ, ใช้ฟังก์ชัน color()
ทั่วไปเพิ่มเติม
ตัวอย่างเช่น สีที่มีชื่อ cornflowerblue
อาจแสดงเป็น #6495ED
หรือ hsl(218.54deg 79.19% 66.08%)
หรือ color(display-p3 0.43 0.58 0.9)
ก็ได้
นอกเหนือจากชื่อและรูปแบบต่างๆ เหล่านี้แล้ว CSS ยังมีสีที่อธิบายว่าเป็นสีของระบบตามที่ระบุไว้ในโมดูลสี CSS ระดับ 4 สีของระบบเหล่านี้เป็นสีที่เบราว์เซอร์กำหนดและแสดงด้วยคีย์เวิร์ด
เช่น สีของระบบ 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
รายการ - เมื่อตั้งค่าเป็น
light
จะเป็นการระบุว่าองค์ประกอบรองรับรูปแบบสีอ่อน - เมื่อตั้งค่าเป็น
dark
จะบ่งชี้ว่าองค์ประกอบรองรับรูปแบบสีมืด
ขอแนะนำ light-dark()
ก่อนหน้านี้ การรีแอ็กต่อค่า color-scheme
ที่ใช้เป็นค่าที่สงวนไว้สำหรับสีของระบบ เนื่องด้วย light-dark()
ที่ระบุในโมดูลสี CSS ระดับ 5 ตอนนี้คุณมีความสามารถเดียวกันนี้ด้วย
light-dark()
เป็นฟังก์ชันที่ยอมรับอาร์กิวเมนต์ 2 รายการ ซึ่งทั้งคู่ต้องเป็น <color>
โดยจะเลือกมา 1 ประเภทตามรูปแบบสีที่ใช้
- หากรูปแบบสีที่ใช้คือ
light
หรือไม่ทราบ ระบบจะแสดงผลค่าที่คำนวณได้ของค่าแรก - หากรูปแบบสีที่ใช้คือ
dark
ระบบจะแสดงผลค่าที่คำนวณแล้วของสีที่สอง
ผลลัพธ์ของ light-dark()
คือ <color>
ใช้ใน CSS ได้ทุกที่ที่ยอมรับ <color>
เช่น ในพร็อพเพอร์ตี้ color
และ background-color
แต่ในฟังก์ชันอย่าง linear-gradient()
ด้วย
ในตัวอย่างต่อไปนี้ สีพื้นหลังที่ใช้คือ #333
ในโหมดมืด หรือ #ccc
ในโหมดสว่าง (หรือโหมดที่ไม่รู้จัก)
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#ccc, #333);
}
โปรดทราบว่าเพื่อให้ light-dark()
ทำงานได้อย่างถูกต้อง คุณต้องระบุ color-scheme
เนื่องจากพร็อพเพอร์ตี้ดังกล่าวรับค่าเดิมมา คุณจึงมักตั้งค่าใน :root
แต่หากต้องการ ก็เลือกตั้งค่าในองค์ประกอบที่ต้องการได้
การนำไปใช้งานที่เกิดประโยชน์
ในตัวอย่างต่อไปนี้ คุณสมบัติที่กำหนดเองบางรายการแสดงถึงสีต่างๆ ในหน้าเว็บ หากต้องการปรับโหมดมืด ระบบจะเขียนทับค่าของพร็อพเพอร์ตี้ที่กำหนดเองเหล่านั้นด้วยค่าอื่นในเงื่อนไขสื่อ 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;
}
}
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);
}
คุณจะบังคับให้แผนผังย่อยบางรายการของ DOM ใช้เฉพาะโหมดสว่างหรือมืดได้โดยการตั้งค่า color-scheme
เป็น dark
หรือ light
ในตัวอย่างต่อไปนี้ จะมีผลกับ :root