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 แบบนี้
ตอนนี้เบราว์เซอร์ยอดนิยม ไม่ว่าจะเป็น Chrome, Firefox, Safari, Edge ทั้งบนเดสก์ท็อปและมือถือ รองรับ prefers-color-scheme
กันครบแล้ว ส่วนเบราว์เซอร์อื่นๆ ดูข้อมูลเพิ่มเติมได้ด้านล่างเลย
และแน่นอนครับ บล็อกนี้ก็รองรับ prefers-color-scheme
ด้วย โดยเขียนปุ่มสลับธีมขึ้นมาเอง และใช้ร่วมกับ Dark Mode ของ Tailwind CSS
ตัวอย่างการใช้งาน
กำหนดให้เบราว์เซอร์โหลดไฟล์ CSS สำหรับ dark theme เฉพาะเมื่อต้องการ
<link
rel="stylesheet"
href="/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 ก็ทำได้เช่นกัน โดยใช้ Window.matchMedia()
แบบนี้
if (matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
สำหรับตัวอย่างเว็บไซต์ที่รองรับ prefers-color-scheme
เพิ่มเติม ลองดูเว็บไซต์ด้านล่างนี้ได้เลยครับ 👇
ข้อมูลเบราว์เซอร์ที่รองรับ
ข้อมูลเพิ่มเติม ℹ
ภาพปกโดย Jason Blackeye บน Unsplash