สีที่ขึ้นอยู่กับรูปแบบสีของ 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 ยังมีสีที่อธิบายว่าเป็นสีของระบบตามที่ระบุไว้ในโมดูลสี 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 จะบ่งชี้ว่าองค์ประกอบรองรับรูปแบบสีมืด

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

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

การสนับสนุนเบราว์เซอร์

• 123
• x
• 120
• x

แหล่งที่มา

ก่อนหน้านี้ การรีแอ็กต่อค่า 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;
  }
}

หน้าที่ตอบสนองต่อโหมดสว่างหรือมืดผ่าน 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