สีที่ขึ้นอยู่กับรูปแบบสีของ 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 แสดงว่าองค์ประกอบรองรับรูปแบบสีเข้ม

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

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

light-dark() คือฟังก์ชันที่ยอมรับอาร์กิวเมนต์ 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;
  }
}

ขอขอบคุณ 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