เพิ่มธีมสีมืดให้เว็บไซต์ด้วย 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) แบบนี้

ตอนนี้เบราว์เซอร์หลักๆ ไม่ว่าจะเป็น Chrome, Firefox, Safari, Edge ทั้งบนเดสก์ท็อปและมือถือ รองรับ prefers-color-scheme กันครบแล้ว ส่วนเบราว์เซอร์อื่นๆ ดูข้อมูลเพิ่มเติมได้ด้านล่างนี้เลย

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

และแน่นอนครับ บล็อกนี้ก็รองรับ 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 ก็ทำได้เช่นกัน โดยใช้ 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

เขียนความคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.