จะตรวจสอบได้อย่างไรว่าระบบปฏิบัติการอยู่ในโหมดมืดในเบราว์เซอร์?

คล้ายกับ " จะตรวจสอบได้อย่างไรว่า OS X อยู่ในโหมดมืด " สำหรับเบราว์เซอร์เท่านั้น

มีใครพบว่ามีวิธีตรวจสอบว่าระบบของผู้ใช้อยู่ใน OS X Dark Mode ใหม่ใน Safari / Chrome / Firefox หรือไม่?

เราต้องการเปลี่ยนการออกแบบเว็บไซต์ของเราให้เป็นมิตรกับโหมดมืดตามโหมดการทำงานปัจจุบัน

มาตรฐานใหม่มีการลงทะเบียนในW3C ในสื่อระดับ 5

หมายเหตุ:ขณะนี้ใช้ได้เฉพาะในSafari Technology Preview Release 68

ในกรณีที่ความต้องการของผู้ใช้คือlight:

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

ในกรณีที่ความต้องการของผู้ใช้คือdark:

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

นอกจากนี้ยังมีตัวเลือกno-preferenceในกรณีที่ผู้ใช้ไม่ต้องการ แต่ฉันขอแนะนำให้คุณใช้ CSS ปกติในกรณีนั้นและเรียงลำดับ CSS ของคุณให้ถูกต้อง

แก้ไข (7 ธ.ค. 2561):

ในSafari Technology Preview Release 71พวกเขาได้ประกาศการสลับใน Safari เพื่อให้ทำการทดสอบได้ง่ายขึ้น ฉันยังทำหน้าทดสอบเพื่อดูพฤติกรรมของเบราว์เซอร์

หากคุณติดตั้งSafari Technology Preview Release 71คุณสามารถเปิดใช้งานผ่าน:

พัฒนา> ฟีเจอร์ทดลอง> รองรับ CSS โหมดมืด

จากนั้นหากคุณเปิดหน้าทดสอบและเปิดตัวตรวจสอบองค์ประกอบคุณจะมีไอคอนใหม่เพื่อสลับโหมดมืด / แสง

-

แก้ไข (11 ก.พ. 2019): Apple จัดส่งในSafari 12.1 Dark Mode ใหม่

-

แก้ไข (5 ก.ย. 2019): ปัจจุบัน 25% ของโลกใช้ CSS โหมดมืดได้ ที่มา: caniuse.com

เบราว์เซอร์ที่กำลังจะมาถึง:

• iOS 13 (ฉันเดาว่าจะจัดส่งในสัปดาห์หน้าหลังจาก Keynote ของ Apple)
• EdgeHTML 76 (ไม่แน่ใจว่าจะจัดส่งเมื่อใด)

-

แก้ไข (5 พ.ย. 2019): ปัจจุบัน 74% ของโลกสามารถใช้ CSS โหมดมืดได้ ที่มา: caniuse.com

-

แก้ไข (3 ก.พ. 2020): Microsoft Edge 79 รองรับโหมดมืด (เผยแพร่เมื่อ 15 ม.ค. 2020)

-

คำแนะนำของฉันคือ: คุณควรพิจารณาใช้โหมดมืดเพราะผู้ใช้ส่วนใหญ่สามารถใช้งานได้แล้ว (โดยเฉพาะอย่างยิ่งสำหรับการประหยัดแบตเตอรี่มือถือ)

หมายเหตุ:ตอนนี้เบราว์เซอร์หลักทั้งหมดรองรับโหมดมืดยกเว้น IE, Edge

หากคุณต้องการตรวจจับจาก JS คุณสามารถใช้รหัสนี้:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

หากต้องการดูการเปลี่ยนแปลง:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

ขณะนี้เป็น (กันยายน 2018) ที่ถูกกล่าวถึงใน "CSS คณะทำงานแก้ไขร่าง" Spec ได้เปิดตัวแล้ว (ดูด้านบน) พร้อมใช้งานเป็นแบบสอบถามสื่อ สิ่งที่มีที่ดินอยู่แล้วใน Safari เห็นที่นี่ ในทางทฤษฎีคุณสามารถทำได้ใน Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

แต่ดูเหมือนว่านี่เป็นส่วนตัว เมื่อวันที่ MDN คุณลักษณะ CSS สื่อinverted-colorsมีการกล่าวถึง เสียบ: ฉัน blogged เกี่ยวกับโหมดมืดที่นี่

ฉันค้นหาด้วย Mozilla API ดูเหมือนว่าจะไม่มีตัวแปรใด ๆ ที่ตรงกับสีของเบราว์เซอร์ - หน้าต่าง แม้ว่าฉันพบหน้าเว็บที่อาจช่วยให้คุณ: วิธีการรูปแบบการใช้งานระบบปฏิบัติการใน CSS แม้จะมีส่วนหัวของบทความ แต่สีจะแตกต่างกันสำหรับ Chrome และ Firefox

ตาม Mozilla นี่คือวิธีที่ต้องการในเดือนกันยายน 2019

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