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

สำเร็จ: ฟีเจอร์บนเว็บนี้พร้อมใช้งานในเครื่องมือเบราว์เซอร์หลักทั้ง 3 รายการแล้ว และจะกลายเป็นฟีเจอร์ใหม่ตามเกณฑ์พื้นฐานตั้งแต่วันที่ 13 พฤษภาคม 2024

สีของระบบจะตอบสนองต่อค่า 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()

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

• 123
• 123
• 120
• 17.5

แหล่งที่มา

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

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

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

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

ในตัวอย่างต่อไปนี้ สีพื้นหลังที่ใช้คือ #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