ทำเว็บให้รองรับ Dark mode ของระบบปฏิบัติการ

ยุคนี้สมัยนี้ Dark theme กำลังมาแรง ระบบปฏิบัติการต่างๆ ทั้ง Windows 10, macOS, Android, และ iOS ต่างรองรับการสลับไปใช้ Dark theme กันที่ระดับระบบปฏิบัติการ และแอพต่างๆ บนระบบปฏิบัติการเหล่านี้จำนวนมากก็รองรับการสลับไปใช้ Dark theme แบบอัตโนมัติตามธีมของระบบปฏิบัติการเช่นกัน

สำหรับคนทำเว็บ เราก็สามารถทำเว็บให้รองรับการสลับธีมอัตโนมัติได้ด้วยเช่นกันผ่าน media query ที่ชื่อว่า prefers-color-scheme

prefers-color-scheme

จริงๆ การเขียนตรวจสอบธีมก็จะคล้ายๆ การเขียน responsive เลย คือเราจะใช้ media query ตรวจสอบค่า prefers-color-scheme ว่าอยู่ในธีมสีอะไร เช่น

body {
  background-color: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
  }
}

จากตัวอย่างก็คือค่าเริ่มต้นของสีพื้นหลังของ body จะเป็นสีขาว (#fff) และถ้าตรวจเจอว่าอยู่ใน dark theme ให้เปลี่ยนเป็นสีดำ (#111)

ใช้ Dark theme เฉพาะบนมือถือ

บางทีเราต้องการใช้ Dark theme เฉพาะบนมือถือเท่านั้น และบนจอคอมพิวเตอร์ก็ใช้ธีมปกติของเว็บต่อไป กรณีแบบนี้เราก็สามารถเขียน media query เพิ่มโดยกำหนด max-width เข้าไปเหมือนการเขียน responsive ปกติได้เลย

body {
  background-color: #fff;
}

@media (prefers-color-scheme: dark) and (max-width: 720px) {
  body {
    background-color: #111;
  }
}

จากตัวอย่างด้านบนก็จะเป็นการเปิดใช้ dark theme ก็ต่อเมื่อระบบปฏิบัติการอยู่ใน dark theme และขนาดหน้าจอกว้างไม่เกิน 720px เท่านั้น

mixin ใน SCSS

ใน SCSS นั้นเราสามารถเขียน mixin เพื่อลดความยาวของโค้ดลง หรือใช้เป็น alias ของบางฟีเจอร์ได้ เช่นในกรณีนี้แทนที่เราจะเขียนตรวจค่ายาวๆ เราเขียน mixin ย่อให้เหลือแค่ darkmode() ได้เช่นกัน

@mixin darkmode() {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

ิbody {
  background-color: #fff;

  @include darkmode() {
    background-color: #111;
  }
}

Browser support

ข้อมูลจากเว็บ Can I Use ? ระบุว่า prefers-color-scheme นั้นรองรับในเบราเซอร์หลักทั้งหมด ไม่ว่าจะเป็น Edge, Safari, Chrome, หรือ Firefox

ทั้งนี้จากที่ลองทดสอบดูพบว่าเบราเซอร์ Edge บน Android นั้นไม่รองรับ prefers-color-scheme ในขณะที่ Chrome บนแอนดรอยด์นั้นรองรับโดยไม่มีปัญหาอะไร