เพิ่มธีมสีมืดให้เว็บไซต์ด้วย prefers-color-scheme

เพิ่มธีมสีมืดให้เว็บไซต์ด้วย prefers-color-scheme

เผยแพร่เมื่อ / อัปเดตเมื่อ

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) หรือบางเบราว์เซอร์อย่าง Firefox เวอร์ชันใหม่บน Android (Fenix) ก็มีตัวเลือกให้ผู้ใช้ปรับแต่งได้เลยแบบนี้ 👈

สำหรับเบราว์เซอร์ที่รองรับตอนนี้ได้แก่ Chrome และ Firefox ทั้งบนเดสก์ท็อปและมือถือ ส่วน Safari รองรับแล้วบน macOS และบน iOS จะรองรับใน iOS 13 ที่จะออกภายในปีนี้ ดูข้อมูลเพิ่มเติมได้ด้านล่างนี้เลย

Data on support for the prefers-color-scheme feature across the major browsers from caniuse.com

และแน่นอนครับ บล็อกนี้ก็รองรับ prefers-color-scheme เแบบที่เห็นไปด้านบน โดยนำมาใช้ร่วมกับ javascript เพื่อให้ปรับแต่งธีมได้ และช่วยให้เบราว์เซอร์ที่ยังไม่รองรับใช้ธีมสีมืดได้ด้วย โดยใช้ match​Media() แบบนี้

if (matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark-theme');
}

โค้ดด้านบนนี้จะเป็นการตรวจสอบว่าเบราว์เซอร์ต้องการใช้ธีมใด ถ้าเป็นธีมสีมืด ก็จะเพิ่ม class dark-theme ให้แท็ก <body> ลองนำไปปรับใช้ดูได้ครับ

สำหรับตัวอย่างเว็บไซต์ที่รองรับ prefers-color-scheme เพิ่มเติม ลองดูเว็บไซต์ด้านล่างนี้ได้เลยครับ 👇


ข้อมูลเพิ่มเติม ℹ

ภาพปกโดย Jason Blackeye บน Unsplash