Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
70 lines (52 sloc) 5.45 KB
title description date lastmod author slug images tags
เพิ่มธีมสีมืดให้เว็บไซต์ด้วย prefers-color-scheme
เพิ่มธีมสีมืด (Dark Theme) ให้เว็บไซต์โดยไม่ต้องใช้ JavaScript ด้วย prefers-color-scheme ใน CSS Media queries
2019-05-27 19:55:52 +0700
2019-08-07 09:32:05 +0700
Pakin
website-dark-theme-prefers-color-scheme
/uploads/2019/05/prefers-color-scheme-cover.jpg
Web Design
Web Dev
CSS

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) ก็มีตัวเลือกให้ผู้ใช้ปรับแต่งได้เลย

{{< video src="/uploads/2019/05/prefers-color-scheme-windows.mp4" controls="true" autoplay="true" mute="true" loop="true" >}}

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

{{< caniuse prefers-color-scheme >}}

และแน่นอนครับ บล็อกนี้ก็รองรับ 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

You can’t perform that action at this time.