Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

สีที่ขึ้นอยู่กับรูปแบบสีของ 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 Color Module Level 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()`

Browser Support

Source

ก่อนหน้านี้ การตอบสนองต่อค่า 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()

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

:root {
  color-scheme: light dark;
}

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

โปรดทราบว่าคุณต้องระบุ color-scheme เพื่อให้ light-dark() ทำงานได้อย่างถูกต้อง เนื่องจากพร็อพเพอร์ตี้นั้นรับค่ามา โดยปกติแล้วคุณจะตั้งค่าใน :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

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

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

การนำไปใช้จริง

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