สีที่ชอบ: สวัสดีความมืด เพื่อนเก่าของฉัน

Overhyped or necessity? ดูข้อมูลทั้งหมดเกี่ยวกับโหมดมืดและวิธีรองรับโหมดนี้เพื่อประโยชน์ของผู้ใช้

Thomas Steiner

บทนำ

โหมดมืดก่อนโหมดมืด

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

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

ซึ่งเป็นจุดเริ่มต้นของเทรนด์การออกแบบสีเข้มบนพื้นขาว และเทรนด์นี้ก็ถูกนำมาใช้กับเว็บที่อิงตามเอกสารในยุคแรกๆ เบราว์เซอร์แรกสุดอย่าง WorldWideWeb (อย่าลืมว่ายังไม่มีการคิดค้น CSS) แสดงหน้าเว็บในลักษณะนี้ เรื่องน่ารู้: เบราว์เซอร์ที่ 2 ที่เคยมีมาอย่าง Line Mode Browser ซึ่งเป็นเบราว์เซอร์แบบเทอร์มินัลมีสีเขียวบนพื้นหลังสีเข้ม ปัจจุบัน หน้าเว็บและเว็บแอปมักออกแบบให้มีข้อความสีเข้มบนพื้นหลังสีอ่อน ซึ่งเป็นสมมติฐานพื้นฐานที่ฮาร์ดโค้ดไว้ในสไตล์ชีตของ User Agent รวมถึง Chrome ด้วย

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

เหตุผลที่ควรใช้โหมดมืด

โหมดมืดเพื่อความสวยงาม

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

โหมดมืดเป็นเครื่องมือช่วยเหลือพิเศษ

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

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

สายตาเลือนรางรูปแบบพิเศษคือกลุ่มอาการคอมพิวเตอร์วิชันซินโดรม (Computer Vision Syndrome) หรือที่เรียกว่าอาการตาล้าจากหน้าจอ (Digital Eye Strain) ซึ่งนิยามไว้ว่าเป็น "ปัญหาด้านดวงตาและการมองเห็นที่เกี่ยวข้องกับการใช้คอมพิวเตอร์ (รวมถึงเดสก์ท็อป แล็ปท็อป และแท็บเล็ต) และจอแสดงผลอิเล็กทรอนิกส์อื่นๆ (เช่น สมาร์ทโฟนและอุปกรณ์อ่านหนังสืออิเล็กทรอนิกส์)" มีการเสนอว่าการใช้อุปกรณ์อิเล็กทรอนิกส์ของวัยรุ่น โดยเฉพาะในเวลากลางคืน จะเพิ่มความเสี่ยงต่อการมีระยะเวลาการนอนหลับที่สั้นลง ระยะเวลาที่ใช้ในการเริ่มนอนหลับนานขึ้น และการนอนหลับไม่เพียงพอมากขึ้น นอกจากนี้ ยังมีรายงานอย่างกว้างขวางว่าการได้รับแสงสีฟ้าเกี่ยวข้องกับการควบคุมจังหวะการทำงานของร่างกายและวงจรการนอนหลับ และสภาพแวดล้อมที่มีแสงไม่สม่ำเสมออาจทำให้เกิดการอดนอน ซึ่งอาจส่งผลต่ออารมณ์และประสิทธิภาพในการทำงาน ตามงานวิจัยของ Rosenfield เพื่อจำกัดผลกระทบเชิงลบเหล่านี้ การลดแสงสีฟ้าด้วยการปรับอุณหภูมิสีของจอแสดงผลผ่านฟีเจอร์ต่างๆ เช่น Night Shift ของ iOS หรือแสงตอนกลางคืนของ Android จะช่วยได้ รวมถึงการหลีกเลี่ยงแสงจ้าหรือแสงที่ไม่สม่ำเสมอโดยทั่วไปผ่านธีมมืดหรือโหมดมืด

การประหยัดพลังงานของโหมดมืดบนหน้าจอ AMOLED

สุดท้ายนี้ โหมดมืดเป็นที่ทราบกันดีว่าช่วยประหยัดพลังงานได้มากบนหน้าจอ AMOLED กรณีศึกษาของ Android ที่มุ่งเน้นแอป Google ยอดนิยม เช่น YouTube แสดงให้เห็นว่าการประหยัดพลังงานอาจสูงถึง 60% วิดีโอด้านล่างมีรายละเอียดเพิ่มเติมเกี่ยวกับกรณีศึกษาเหล่านี้และการประหยัดพลังงานต่อแอป

การเปิดใช้งานโหมดมืดในระบบปฏิบัติการ

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

ระบบปฏิบัติการที่รองรับโหมดมืดหรือธีมมืดมักจะมีตัวเลือกให้เปิดใช้งานได้ในการตั้งค่า ใน macOS X การตั้งค่านี้จะอยู่ในส่วนทั่วไปของค่ากำหนดของระบบและเรียกว่าลักษณะที่ปรากฏ (ภาพหน้าจอ) และใน Windows 10 การตั้งค่านี้จะอยู่ในส่วนสีและเรียกว่าเลือกสี (ภาพหน้าจอ) สำหรับ Android Q คุณจะเห็นตัวเลือกนี้ในส่วนการแสดงผลเป็นสวิตช์เปิด/ปิดธีมมืด (ภาพหน้าจอ) และใน iOS 13 คุณจะเปลี่ยนลักษณะที่ปรากฏได้ในส่วนจอแสดงผลและความสว่างของการตั้งค่า (ภาพหน้าจอ)

การค้นหาสื่อ prefers-color-scheme

ทฤษฎีสุดท้ายก่อนที่เราจะเริ่มกัน การค้นหาสื่อช่วยให้ผู้เขียนทดสอบและค้นหาค่าหรือฟีเจอร์ของ User Agent หรืออุปกรณ์แสดงผลได้ โดยไม่ขึ้นอยู่กับเอกสารที่แสดงผล โดยจะใช้ในกฎ CSS @media เพื่อใช้สไตล์กับเอกสารแบบมีเงื่อนไข และในบริบทและภาษาอื่นๆ เช่น HTML และ JavaScript Media Queries ระดับ 5 เปิดตัวฟีเจอร์สื่อที่เรียกว่าค่ากำหนดของผู้ใช้ ซึ่งก็คือ วิธีที่เว็บไซต์ตรวจหาวิธีที่ผู้ใช้ต้องการให้แสดงเนื้อหา

ฟีเจอร์สื่อ prefers-color-scheme ใช้เพื่อตรวจหาว่าผู้ใช้ขอให้หน้าเว็บใช้ธีมสีสว่างหรือสีมืดหรือไม่ โดยจะใช้ได้กับค่าต่อไปนี้

• light: ระบุว่าผู้ใช้ได้แจ้งระบบว่าต้องการหน้าเว็บที่มีธีมสว่าง (ข้อความสีเข้มบนพื้นหลังสีอ่อน)
• dark: ระบุว่าผู้ใช้ได้แจ้งระบบว่าต้องการหน้าเว็บที่มีธีมมืด (ข้อความสีอ่อนบนพื้นหลังสีเข้ม)

รองรับโหมดมืด

การตรวจสอบว่าเบราว์เซอร์รองรับโหมดมืดหรือไม่

เนื่องจากโหมดมืดจะรายงานผ่านคิวรี่สื่อ คุณจึงตรวจสอบได้ง่ายๆ ว่าเบราว์เซอร์ปัจจุบันรองรับโหมดมืดหรือไม่โดยดูว่าคิวรี่สื่อ prefers-color-scheme ตรงกันหรือไม่ โปรดทราบว่าฉันไม่ได้ใส่ค่าใดๆ แต่จะตรวจสอบว่าการค้นหาสื่อเพียงอย่างเดียวตรงกันหรือไม่

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

ในขณะที่เขียนบทความนี้ prefers-color-scheme ได้รับการรองรับทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ (หากมี) โดย Chrome และ Edge ตั้งแต่เวอร์ชัน 76, Firefox ตั้งแต่เวอร์ชัน 67 และ Safari ตั้งแต่เวอร์ชัน 12.1 ใน macOS และตั้งแต่เวอร์ชัน 13 ใน iOS สำหรับเบราว์เซอร์อื่นๆ ทั้งหมด คุณสามารถดูเอกสารฉันใช้ตารางการสนับสนุนได้ไหม

การเรียนรู้เกี่ยวกับค่ากำหนดของผู้ใช้ ณ เวลาที่ส่งคำขอ

ส่วนหัวคำแนะนำสำหรับไคลเอ็นต์ Sec-CH-Prefers-Color-Scheme ช่วยให้เว็บไซต์สามารถรับค่ากำหนดรูปแบบสีของผู้ใช้ได้ (ไม่บังคับ) ณ เวลาที่ส่งคำขอ ซึ่งจะช่วยให้เซิร์ฟเวอร์สามารถแทรก CSS ที่ถูกต้องในบรรทัดได้ จึงหลีกเลี่ยงการแสดงธีมสีที่ไม่ถูกต้องได้

โหมดมืดในการใช้งานจริง

สุดท้ายนี้ มาดูตัวอย่างการรองรับโหมดมืดในทางปฏิบัติกัน เช่นเดียวกับภาพยนตร์เรื่อง Highlander โหมดมืดมีได้เพียงหนึ่งเดียว นั่นคือมืดหรือสว่าง แต่ไม่ใช่ทั้ง 2 อย่าง ทำไมเราถึงพูดถึงเรื่องนี้ เนื่องจากข้อเท็จจริงนี้ควรส่งผลต่อกลยุทธ์การโหลด โปรดอย่าบังคับให้ผู้ใช้ดาวน์โหลด CSS ในเส้นทางการแสดงผลที่สำคัญซึ่งมีไว้สำหรับโหมดที่ผู้ใช้ไม่ได้ใช้ในปัจจุบัน ดังนั้น เพื่อเพิ่มประสิทธิภาพความเร็วในการโหลด ฉันจึงแยก CSS สำหรับแอปตัวอย่างที่แสดงคำแนะนำต่อไปนี้ในทางปฏิบัติออกเป็น 3 ส่วนเพื่อเลื่อน CSS ที่ไม่สำคัญออกไป

• style.css ที่มีกฎทั่วไปซึ่งใช้กันอย่างแพร่หลายในเว็บไซต์
• dark.css ที่มีเฉพาะกฎที่จำเป็นสำหรับโหมดมืด
• light.css ที่มีเฉพาะกฎที่จำเป็นสำหรับโหมดสว่าง

กำลังโหลดกลยุทธ์

ส่วน 2 รายการหลัง ได้แก่ light.css และ dark.css จะโหลดแบบมีเงื่อนไขด้วยการค้นหา <link media> ในตอนแรก เบราว์เซอร์บางรายการจะไม่รองรับ prefers-color-scheme (ตรวจพบได้โดยใช้รูปแบบด้านบน) ซึ่งฉันจัดการแบบไดนามิกโดยการโหลดไฟล์ light.css เริ่มต้น ผ่านองค์ประกอบ <link rel="stylesheet"> ที่แทรกแบบมีเงื่อนไขในสคริปต์ในบรรทัดขนาดเล็ก (ธีมสว่างเป็นตัวเลือกที่กำหนดเอง ฉันอาจทำให้ธีมมืดเป็นประสบการณ์สำรองเริ่มต้นก็ได้) เพื่อหลีกเลี่ยงการแสดงเนื้อหาที่ไม่มีการจัดรูปแบบ ฉันจะซ่อนเนื้อหาของหน้าจนกว่า light.css จะโหลดเสร็จ

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

สถาปัตยกรรมสไตล์ชีต

ผมใช้ตัวแปร CSS ให้เกิดประโยชน์สูงสุด ซึ่งช่วยให้ style.css ทั่วไปเป็นแบบทั่วไป และการปรับแต่งโหมดสว่างหรือโหมดมืดทั้งหมดจะเกิดขึ้นในไฟล์อื่นๆ อีก 2 ไฟล์ ได้แก่ dark.css และ light.css ด้านล่างนี้เป็นตัวอย่างของสไตล์จริง แต่ก็เพียงพอที่จะสื่อถึงแนวคิดโดยรวม ฉันประกาศตัวแปร 2 ตัว ได้แก่ -⁠-⁠color และ -⁠-⁠background-color ซึ่งโดยพื้นฐานแล้วจะสร้างธีมพื้นฐานสีเข้มบนพื้นหลังสีอ่อนและสีอ่อนบนพื้นหลังสีเข้ม

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

ใน style.css ฉันจะใช้ตัวแปรเหล่านี้ในกฎ body { … } เนื่องจากมีการกำหนดไว้ในคลาสเทียม CSS :root ซึ่งเป็นตัวเลือกที่แสดงถึงองค์ประกอบ <html> ใน HTML และเหมือนกับตัวเลือก html ยกเว้นว่ามีความเฉพาะเจาะจงสูงกว่า โดยจะเรียงซ้อนกันลงมา ซึ่งช่วยให้ฉันประกาศตัวแปร CSS ทั่วโลกได้

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

ในตัวอย่างโค้ดด้านบน คุณอาจสังเกตเห็นพร็อพเพอร์ตี้ color-scheme ที่มีค่า light dark ซึ่งคั่นด้วยเว้นวรรค

ซึ่งจะบอกเบราว์เซอร์ว่าแอปของฉันรองรับธีมสีใด และอนุญาตให้เปิดใช้งานตัวแปรพิเศษของสไตล์ชีต User Agent ซึ่งมีประโยชน์ เช่น ช่วยให้เบราว์เซอร์แสดงผลช่องแบบฟอร์มที่มีพื้นหลังสีเข้มและข้อความสีอ่อน ปรับแถบเลื่อน หรือเปิดใช้สีไฮไลต์ที่คำนึงถึงธีม รายละเอียดที่แน่นอนของ color-scheme ระบุไว้ในโมดูลการปรับสี CSS ระดับ 1

ส่วนที่เหลือก็เป็นเพียงการกำหนดตัวแปร CSS สำหรับสิ่งสำคัญในเว็บไซต์ การจัดระเบียบสไตล์ตามความหมายช่วยได้มากเมื่อทำงานกับโหมดมืด เช่น แทนที่จะใช้ -⁠-⁠highlight-yellow ให้พิจารณาเรียกตัวแปรว่า -⁠-⁠accent-color เนื่องจาก "สีเหลือง" อาจไม่ใช่สีเหลืองในโหมดมืดหรือในทางกลับกัน ด้านล่างนี้เป็นตัวอย่างตัวแปรเพิ่มเติมบางส่วนที่เราใช้ในตัวอย่างของเรา

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

ตัวอย่างแบบเต็ม

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

ผลกระทบจากการโหลด

เมื่อลองเล่นกับตัวอย่างนี้ คุณจะเห็นว่าทำไมฉันจึงโหลด dark.css และ light.css ผ่าน Media Query ลองสลับโหมดมืดและโหลดหน้าเว็บซ้ำ: สไตล์ชีตที่เฉพาะเจาะจงซึ่งไม่ตรงกันในปัจจุบันจะยังคงโหลดอยู่ แต่มีลำดับความสำคัญต่ำสุด เพื่อไม่ให้แข่งขันกับทรัพยากรที่เว็บไซต์ต้องการในขณะนี้

การตอบสนองต่อการเปลี่ยนแปลงโหมดมืด

คุณสามารถสมัครรับการเปลี่ยนแปลงโหมดมืดผ่าน JavaScript ได้เช่นเดียวกับการเปลี่ยนแปลงการค้นหาสื่ออื่นๆ คุณสามารถใช้ฟีเจอร์นี้เพื่อเปลี่ยนไอคอน Fav ของหน้าเว็บแบบไดนามิก หรือเปลี่ยน <meta name="theme-color"> ที่กำหนดสีของแถบ URL ใน Chrome ได้ ตัวอย่างแบบเต็มด้านบนแสดงให้เห็นการทำงานนี้ หากต้องการดูการเปลี่ยนแปลงสีธีมและไอคอน Fav ให้เปิดเดโมในแท็บแยกต่างหาก

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

ตั้งแต่ Chromium 93 และ Safari 15 เป็นต้นไป คุณสามารถปรับสีตามการค้นหาสื่อด้วยแอตทริบิวต์ media ขององค์ประกอบสีธีม meta ระบบจะเลือกรายการแรกที่ตรงกัน เช่น คุณอาจใช้สีหนึ่งสำหรับโหมดสว่างและอีกสีหนึ่งสำหรับโหมดมืด ในขณะที่เขียนบทความนี้ คุณไม่สามารถกำหนดค่าเหล่านั้นในไฟล์ Manifest ได้ ดูปัญหาเกี่ยวกับ GitHub w3c/manifest#975

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

การแก้ไขข้อบกพร่องและการทดสอบโหมดมืด

กำลังจำลอง prefers-color-scheme ในเครื่องมือสำหรับนักพัฒนาเว็บ

การเปลี่ยนรูปแบบสีของระบบปฏิบัติการทั้งหมดอาจสร้างความรำคาญได้อย่างรวดเร็ว ดังนั้นเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จึงให้คุณจำลองรูปแบบสีที่ผู้ใช้ต้องการได้แล้ว ในลักษณะที่ส่งผลต่อแท็บที่มองเห็นได้ในปัจจุบันเท่านั้น เปิดเมนูคำสั่ง เริ่มพิมพ์ Rendering เรียกใช้คำสั่ง Show Rendering แล้วเปลี่ยนตัวเลือกจำลองฟีเจอร์สื่อ CSS prefers-color-scheme

การจับภาพหน้าจอ prefers-color-scheme ด้วย Puppeteer

Puppeteer เป็นไลบรารี Node.js ที่มี API ระดับสูงเพื่อควบคุม Chrome หรือ Chromium ผ่านโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ dark-mode-screenshot มีสคริปต์ Puppeteer ที่ช่วยให้คุณสร้างภาพหน้าจอของหน้าเว็บทั้งในโหมดมืดและโหมดสว่าง คุณสามารถเรียกใช้สคริปต์นี้แบบครั้งเดียว หรือจะทำให้เป็นส่วนหนึ่งของชุดโปรแกรมทดสอบการรวมอย่างต่อเนื่อง (CI) ก็ได้

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

แนวทางปฏิบัติแนะนำสำหรับโหมดมืด

หลีกเลี่ยงสีขาวบริสุทธิ์

รายละเอียดเล็กๆ น้อยๆ ที่คุณอาจสังเกตเห็นคือฉันไม่ได้ใช้สีขาวล้วน แต่เพื่อป้องกันไม่ให้สีขาวสว่างเกินไปและกลืนไปกับเนื้อหาสีเข้มที่อยู่รอบๆ ฉันจึงเลือกสีขาวที่เข้มขึ้นเล็กน้อย ชื่ออย่าง rgb(250, 250, 250) ก็ใช้ได้ดี

ปรับสีใหม่และทำให้ภาพถ่ายมืดลง

หากเปรียบเทียบภาพหน้าจอ 2 ภาพด้านล่าง คุณจะเห็นว่าไม่เพียงแต่ธีมหลักจะเปลี่ยนจากมืดบนสว่างเป็นสว่างบนมืดเท่านั้น แต่รูปภาพหลักก็ดูแตกต่างออกไปเล็กน้อยด้วย การศึกษาวิจัยผู้ใช้ของฉันแสดงให้เห็นว่าผู้ที่ตอบแบบสำรวจส่วนใหญ่ชอบรูปภาพที่มีสีสันสดใสและสว่างน้อยลงเล็กน้อยเมื่อเปิดใช้โหมดมืด ฉันเรียกกระบวนการนี้ว่าการลงสีใหม่

คุณเปลี่ยนสีได้โดยใช้ตัวกรอง CSS ในรูปภาพ ฉันใช้ตัวเลือก CSS ที่ตรงกับรูปภาพทั้งหมดที่ไม่มี .svg ใน URL โดยมีแนวคิดว่าฉันสามารถใช้การปรับสีภาพกราฟิกเวกเตอร์ (ไอคอน) ที่แตกต่างจากรูปภาพ (ภาพถ่าย) ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในย่อหน้าถัดไป โปรดสังเกตว่าฉันใช้ตัวแปร CSS อีกครั้งเพื่อให้เปลี่ยนตัวกรองได้อย่างยืดหยุ่นในภายหลัง

เนื่องจากการเปลี่ยนสีจำเป็นเฉพาะในโหมดมืดเท่านั้น กล่าวคือเมื่อ dark.css ทำงานอยู่ จึงไม่มีกฎที่เกี่ยวข้องใน light.css

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

การปรับแต่งความเข้มของการเปลี่ยนสีในโหมดมืดด้วย JavaScript

ผู้ใช้แต่ละคนมีความต้องการใช้โหมดมืดที่แตกต่างกัน การยึดตามวิธีการเปลี่ยนสีที่อธิบายไว้ข้างต้นช่วยให้ฉันกำหนดความเข้มของโทนสีเทาเป็นค่ากำหนดของผู้ใช้ที่ฉันสามารถเปลี่ยนแปลงผ่าน JavaScript ได้อย่างง่ายดาย และการตั้งค่าเป็น 0% ยังช่วยให้ฉันปิดใช้การเปลี่ยนสีได้อย่างสมบูรณ์ด้วย โปรดทราบว่า document.documentElement ให้ข้อมูลอ้างอิงถึงองค์ประกอบรูทของเอกสาร ซึ่งเป็นองค์ประกอบเดียวกับที่ฉันสามารถอ้างอิงได้ด้วย :root คลาสจำลอง CSS

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

กลับสีภาพกราฟิกเวกเตอร์และไอคอน

สำหรับภาพกราฟิกเวกเตอร์ ซึ่งในกรณีของฉันใช้เป็นไอคอนที่ฉันอ้างอิงผ่านองค์ประกอบ <img> ฉันจะใช้วิธีการเปลี่ยนสีที่แตกต่างออกไป แม้ว่าการวิจัยจะแสดงให้เห็นว่าผู้คนไม่ชอบการกลับสีสำหรับรูปภาพ แต่การกลับสีก็ใช้ได้ดีกับไอคอนส่วนใหญ่ ฉันใช้ตัวแปร CSS อีกครั้งเพื่อกำหนดจำนวนการกลับสีในสถานะปกติและในสถานะ :hover

โปรดสังเกตว่าฉันกลับสีไอคอนใน dark.css เท่านั้น แต่ไม่กลับสีใน light.css และ :hover ได้รับความเข้มของการกลับสีที่แตกต่างกันในทั้ง 2 กรณีเพื่อให้ไอคอนปรากฏเป็นสีเข้มขึ้นเล็กน้อยหรือสว่างขึ้นเล็กน้อย โดยขึ้นอยู่กับโหมดที่ผู้ใช้เลือก

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

ใช้ currentColor สำหรับ SVG ในบรรทัด

สำหรับรูปภาพ SVG ในบรรทัด แทนที่จะใช้ตัวกรองการกลับสี คุณสามารถใช้ประโยชน์จากคีย์เวิร์ด CSS currentColor ซึ่งแสดงค่าของพร็อพเพอร์ตี้ color ขององค์ประกอบได้ ซึ่งจะช่วยให้คุณใช้ค่า color ในพร็อพเพอร์ตี้ที่ไม่ได้รับค่าดังกล่าวโดยค่าเริ่มต้นได้ หากใช้ currentColor เป็นค่าของแอตทริบิวต์ fill หรือ stroke ของ SVG ค่าดังกล่าวจะใช้ค่าจากค่าที่รับช่วงมาของพร็อพเพอร์ตี้สีแทน ยิ่งไปกว่านั้น วิธีนี้ยังใช้ได้กับ <svg><use href="…"></svg> ด้วย คุณจึงสามารถแยกทรัพยากรได้ และระบบจะยังคงใช้ currentColor ในบริบท โปรดทราบว่าวิธีนี้ใช้ได้กับ SVG ในบรรทัดหรือ <use href="…"> เท่านั้น แต่ใช้ไม่ได้กับ SVG ที่อ้างอิงเป็น src ของรูปภาพหรือผ่าน CSS คุณจะเห็นการนำไปใช้ในเดโมด้านล่าง

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

การเปลี่ยนโหมดที่ราบรื่น

การเปลี่ยนจากโหมดมืดเป็นโหมดสว่างหรือในทางกลับกันจะราบรื่นขึ้นเนื่องจากทั้ง color และ background-color เป็นพร็อพเพอร์ตี้ CSS ที่เคลื่อนไหวได้ การสร้างภาพเคลื่อนไหวทำได้ง่ายๆ เพียงประกาศ transition 2 รายการสำหรับพร็อพเพอร์ตี้ 2 รายการ ตัวอย่างด้านล่างแสดงแนวคิดโดยรวม คุณสามารถดูการทำงานจริงได้ในเดโม

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

อาร์ตไดเรกชันที่มีโหมดมืด

แม้ว่าโดยทั่วไปแล้วเราจะแนะนำให้ใช้ prefers-color-scheme ในแอตทริบิวต์ media ขององค์ประกอบ <link> (แทนที่จะใช้แบบแทรกในบรรทัดในสไตล์ชีต) เพื่อประสิทธิภาพในการโหลด แต่ก็มีบางสถานการณ์ที่คุณอาจต้องการใช้ prefers-color-scheme แบบแทรกในบรรทัดโดยตรงในโค้ด HTML การกำกับศิลป์ก็เป็นสถานการณ์เช่นนี้ ในเว็บ การกำกับศิลป์จะเกี่ยวข้องกับลักษณะภาพโดยรวมของหน้าเว็บและวิธีที่หน้าเว็บสื่อสารด้วยภาพ กระตุ้นอารมณ์ เปรียบเทียบฟีเจอร์ และดึงดูดกลุ่มเป้าหมายในเชิงจิตวิทยา

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

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

โหมดมืด แต่เพิ่มตัวเลือกไม่ใช้

ดังที่กล่าวไว้ในส่วนเหตุใดจึงควรใช้โหมดมืดด้านบน โหมดมืดเป็นตัวเลือกด้านสุนทรียศาสตร์สำหรับผู้ใช้ส่วนใหญ่ ด้วยเหตุนี้ ผู้ใช้บางรายอาจต้องการให้ UI ของระบบปฏิบัติการเป็นสีมืด แต่ยังคงต้องการดูหน้าเว็บในแบบที่คุ้นเคย รูปแบบที่ดีคือการยึดตามสัญญาณที่เบราว์เซอร์ส่งผ่าน prefers-color-scheme ในตอนแรก แต่จากนั้นก็อนุญาตให้ผู้ใช้ลบล้างการตั้งค่าระดับระบบได้ (ไม่บังคับ)

องค์ประกอบที่กำหนดเอง <dark-mode-toggle>

แน่นอนว่าคุณสามารถสร้างโค้ดสำหรับเรื่องนี้ได้ด้วยตนเอง แต่คุณยังสามารถใช้องค์ประกอบที่กำหนดเอง (คอมโพเนนต์เว็บ) สำเร็จรูปที่ฉันสร้างขึ้นเพื่อวัตถุประสงค์นี้โดยเฉพาะได้ด้วย ซึ่งมีชื่อว่า <dark-mode-toggle> และจะเพิ่มปุ่มเปิด/ปิด (โหมดมืด: เปิด/ปิด) หรือตัวสลับธีม (ธีม: สว่าง/มืด) ลงในหน้าเว็บที่คุณปรับแต่งได้อย่างเต็มที่ เดโมด้านล่างแสดงการทำงานขององค์ประกอบ (อ้อ และฉันยังแอบใส่ไว้ในตัวอย่างอื่นๆ ด้านบนด้วย 🤫)

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

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

บทสรุป

การทำงานและรองรับโหมดมืดเป็นเรื่องสนุกและเปิดโอกาสให้มีการออกแบบใหม่ๆ สำหรับผู้เข้าชมบางราย การปรับปรุงนี้อาจเป็นความแตกต่างระหว่างการไม่สามารถใช้งานเว็บไซต์ของคุณกับการเป็นผู้ใช้ที่มีความสุข แม้ว่าจะมีข้อผิดพลาดบางอย่างและจำเป็นต้องทำการทดสอบอย่างรอบคอบ แต่โหมดมืดก็เป็นโอกาสที่ดีในการแสดงให้เห็นว่าคุณใส่ใจผู้ใช้ทุกคน แนวทางปฏิบัติแนะนำที่กล่าวถึงในโพสต์นี้และตัวช่วยอย่างองค์ประกอบที่กำหนดเอง <dark-mode-toggle> จะช่วยให้คุณมั่นใจในความสามารถในการสร้างประสบการณ์การใช้งานโหมดมืดที่น่าทึ่ง แจ้งให้เราทราบทาง Twitter เกี่ยวกับสิ่งที่คุณสร้างและโพสต์นี้มีประโยชน์หรือไม่ หรือจะให้คำแนะนำในการปรับปรุงก็ได้ ขอขอบคุณที่อ่านข้อมูล 🌒

ลิงก์ที่เกี่ยวข้อง

แหล่งข้อมูลสำหรับการค้นหาสื่อ prefers-color-scheme:

• หน้าสถานะแพลตฟอร์ม Chrome
• ข้อบกพร่องของ Chromium
• ข้อกำหนดของ Media Queries ระดับ 5

แหล่งข้อมูลสำหรับเมตาแท็ก color-scheme และพร็อพเพอร์ตี้ CSS

• พร็อพเพอร์ตี้ CSS และเมตาแท็ก color-scheme
• หน้าสถานะแพลตฟอร์ม Chrome
• ข้อบกพร่องของ Chromium
• ข้อกำหนด CSS Color Adjustment Module Level 1
• ปัญหาเกี่ยวกับ GitHub ของ CSS WG สำหรับเมตาแท็กและพร็อพเพอร์ตี้ CSS
• ปัญหา GitHub ของ WHATWG HTML สำหรับเมตาแท็ก

ลิงก์โหมดมืดทั่วไป

• Material Design - ธีมมืด
• โหมดมืดในเครื่องมือตรวจสอบเว็บ
• การรองรับโหมดมืดใน WebKit
• หลักเกณฑ์ด้านอินเทอร์เฟซสำหรับมนุษย์ของ Apple - โหมดมืด

บทความวิจัยเบื้องหลังสำหรับโพสต์นี้

• "รูปแบบสีที่รองรับ" ของโหมดมืดทำอะไรได้บ้าง 🤔
• มาใช้ธีมมืดกันเถอะ 🌚 อาจจะ…
• การเปลี่ยนสีสำหรับโหมดมืด

การรับทราบ

ฟีเจอร์สื่อ prefers-color-scheme, พร็อพเพอร์ตี้ CSS color-scheme และเมตาแท็กที่เกี่ยวข้องเป็นผลงานการติดตั้งใช้งานของ 👏 Rune Lillesveen นอกจากนี้ Rune ยังเป็นผู้ร่วมแก้ไขข้อกำหนด CSS Color Adjustment Module Level 1 ด้วย ขอ 🙏 ขอบคุณ Lukasz Zbylut, Rowan Merewood, Chirag Desai และ Rob Dodson ที่ช่วยตรวจสอบบทความนี้อย่างละเอียด กลยุทธ์การโหลดเป็นแนวคิดของ Jake Archibald Emilio Cobos Álvarez ได้แนะนำวิธีการตรวจหา prefers-color-scheme ที่ถูกต้องให้ฉัน เคล็ดลับเกี่ยวกับ SVG ที่อ้างอิงและ currentColor มาจาก Timothy Hatcher สุดท้ายนี้ ขอขอบคุณผู้เข้าร่วมการศึกษาผู้ใช้หลายรายที่ไม่ประสงค์ออกนามซึ่งช่วยกำหนดคำแนะนำในบทความนี้