prefers-color-scheme เป็นหนึ่งใน CSS Media queries ใช้เพื่อตรวจสอบว่าเบราว์เซอร์ต้องการใช้ธีมสีใดในเว็บไซต์ โดยจะแบ่งเป็น light สำหรับธีมสีสว่าง ☀️ และ dark สำหรับธีมสีมืด 🌙
วิธีใช้ก็ไม่ยาก เหมือน CSS Media queries ที่ใช้ทำเว็บให้เป็น responsive แต่แทนที่เราจะตรวจสอบค่า width ก็เปลี่ยนมาเป็น prefers-color-scheme แทนแบบนี้
@media (prefers-color-scheme: light) {
body {
background: white;
color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}ในโค้ดด้านบนคือถ้าผู้ใช้ตั้งธีมสีสว่างไว้ พื้นหลังก็จะเป็นสีขาว และตัวอักษรสีดำ แต่ถ้าตั้งธีมสีมืดไว้ก็จะกลับกัน เป็นพื้นหลังก็สีดำ และตัวอักษรสีขาวแทน
โดยธีมที่เบราว์เซอร์เลือกใช้จะอิงจากการตั้งค่าธีมของระบบ เช่นบน Windows, macOS, Android (Q) แบบนี้
ตอนนี้เบราว์เซอร์หลักๆ ไม่ว่าจะเป็น Chrome, Firefox, Safari, Edge ทั้งบนเดสก์ท็อปและมือถือ รองรับ prefers-color-scheme กันครบแล้ว ส่วนเบราว์เซอร์อื่นๆ ดูข้อมูลเพิ่มเติมได้ด้านล่างนี้เลย
และแน่นอนครับ บล็อกนี้ก็รองรับ prefers-color-scheme ด้วย โดยกำหนดให้เบราว์เซอร์โหลดไฟล์ CSS สำหรับ dark theme เฉพาะเมื่อต้องการ และใช้คู่กับ <dark-mode-toggle> Element แบบนี้
<link rel='stylesheet' href='https://lazywasabi.com/wp-content/plugins/husky/css/dark.css' type='text/css' media='(prefers-color-scheme: dark)' />อีกหนึ่งวิธีที่ผมแนะนำคือใช้ร่วมกับ CSS Custom properties เพื่อให้ปรับแต่งได้ง่ายขึ้น
:root {
--background: #fff;
--color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #000;
--color: #fff;
}
}
body {
background: var(--background);
color: var(--color);
}หรือถ้าต้องการใช้กับ JavaScript ก็ทำได้เช่นกัน โดยใช้ matchMedia() แบบนี้
if (matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark-theme');
}โค้ดด้านบนนี้จะเป็นการตรวจสอบว่าเบราว์เซอร์ต้องการใช้ธีมใด ถ้าเป็นธีมสีมืด ก็จะเพิ่ม class dark-theme ให้แท็ก <body> ลองนำไปปรับใช้ดูได้ครับ
สำหรับตัวอย่างเว็บไซต์ที่รองรับ prefers-color-scheme เพิ่มเติม ลองดูเว็บไซต์ด้านล่างนี้ได้เลยครับ 👇
ข้อมูลเพิ่มเติม ℹ
ภาพปกโดย Jason Blackeye บน Unsplash