โหมดมืดอัตโนมัติพร้อม JavaScript

หนึ่งในคุณสมบัติที่ได้รับการร้องขอมากที่สุดในแอปพลิเคชั่นคือโหมดมืด สำหรับผู้ใช้หลายๆ คน โหมดมืดจะมอบอินเทอร์เฟซที่เป็นมิตรต่อสายตามากขึ้น โดยมีโทนสีขาวที่อาจทำให้ปวดตาน้อยลง โหมดมืดเป็นที่รู้จักกันเพื่อประหยัดแบตเตอรี่บนหน้าจอ AMOLED

บ่อยครั้ง นักออกแบบเว็บไซต์ใช้prefers-color-schemeคุณลักษณะสื่อ CSS เพื่อจัดเตรียมธีมอื่นเมื่อเปิดใช้งานโหมดมืด prefers-color-schemeได้รับการกำหนดค่าตามความชอบของผู้ใช้ผ่านการตั้งค่า OS หรือการตั้งค่าตัวแทนผู้ใช้ นี่คือตัวอย่างง่ายๆ:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

โหมดมืดเป็นคุณสมบัติที่มีประโยชน์อย่างยิ่งสำหรับผู้ใช้ส่วนใหญ่ ใช้ประโยชน์จากmatchMedia()วิธีการนี้เพื่อมอบประสบการณ์ที่ดียิ่งขึ้นแก่ผู้ใช้ของคุณ

หากคุณชอบบทความนี้ คุณอาจชอบหนังสือของ Faraz Kelhini, Modern Asynchronous JavaScript จนถึงวันที่ 15 พฤษภาคม 2022 คุณสามารถใช้รหัสโปรโมชันfkajs_medium_35เพื่อรับส่วนลด 35% สำหรับเวอร์ชัน eBook รหัสโปรโมชั่นใช้ไม่ได้กับการซื้อครั้งก่อน

บทความโดยฟาราซ เคลฮินี