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

ในโค้ดด้านบนคือถ้าผู้ใช้ตั้งธีมสีสว่างไว้ พื้นหลังก็จะเป็นสีขาว และตัวอักษรสีดำ แต่ถ้าตั้งธีมสีมืดไว้ก็จะกลับกัน เป็นพื้นหลังก็สีดำ และตัวอักษรสีขาวแทน

โดยธีมที่เบราว์เซอร์เลือกใช้จะอิงจากการตั้งค่าธีมของระบบ เช่นบน Android แบบนี้

ตอนนี้เบราว์เซอร์ยอดนิยมอย่างตระกูล Chromium, Firefox และ Safari ทั้งบนเดสก์ท็อปและมือถือรองรับ 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 เพิ่มเติม ลองดูเว็บไซต์ด้านล่างนี้ได้เลยครับ 👇

ข้อมูลเบราว์เซอร์ที่รองรับ

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

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

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